当组件是无状态功能时，通过显示名称查找组件，使用 Enzyme

Posted 2023-02-23

【中文标题】当组件是无状态功能时，通过显示名称查找组件，使用 Enzyme

【英文标题】：Find component by display name when the component is stateless functional, with Enzyme

【发布时间】：2016-05-25 10:41:04

【问题描述】：

我有以下组件：

// Hello.js
export default (React) => (name) => 
  return (
    <div>
      Hello name ? name : 'Stranger'!
    </div>
  )


// App.js
import createHello from './Hello'

export default (React) => () => 
  const Hello = createHello(React)
  const helloProps = 
    name: 'Jane'
  
  return (
    <Hello  ...helloProps  />
  )


// index.js
import React from 'react'
import  render  from 'react-dom'
import createApp from './App'

const App = createApp(React)

render(
  <App />,
  document.getElementById('app')
)

我想设置一个测试来查看App 组件是否包含一个Hello 组件。我尝试了以下方法，使用Tape 和Enzyme：

import createApp from './App'
import React from 'react'
import test from 'tape'
import  shallow  from 'enzyme'

test('App component test', (assert) => 
  const App = createApp(React)
  const wrapper = shallow(<App />)
  assert.equal(wrapper.find('Hello').length === 1, true)
)

但结果是find 结果的length 属性等于0，而我期望它等于1。那么，如何找到我的Hello 组件？

【参考方案1】：

尝试在文件顶部导入Hello 组件，然后更新您的断言以找到实际组件而不是它的名称。如下：

import createApp from './App'
import Hello from './Hello'
import React from 'react'
import test from 'tape'
import  shallow  from 'enzyme'

test('App component test', (assert) => 
  const App = createApp(React)
  const wrapper = shallow(<App />)
  assert.equal(wrapper.find(Hello).length === 1, true)
)

顺便说一句，对于所有酶用户来说，断言将类似于：

expect(wrapper.find(Hello)).toHaveLength(1);

【参考方案2】：

在这种情况下，您可以做几件事。 Enzyme 可以根据构造函数的静态.displayName 或.name 属性或通过引用相等来匹配组件构造函数。因此，以下方法都应该有效：

直接引用

您可以在测试中导入实际组件并使用对组件的直接引用来找到它们：

// NavBar-test.js

import NavBar from './path/to/NavBar';  
...  
wrapper.find(NavBar).length)

命名函数表达式

如果您使用命名函数表达式来创建无状态函数组件，则名称应该仍然有效。

// NavBar.js  

module.exports = function NavBar(props)  ... 

静态.displayName 属性

您可以在组件上添加静态.displayName 属性：

// NavBar.js

const NavBar = (props) =>  ... ;
NavBar.displayName = 'NavBar';

【讨论】：

但是这种酶行为的原因是什么？因为“命名”和“默认”导出之间不应该有区别。当我提供静态名称字符串expect(wrapper.find('AComponent').length)...

时，酶找不到命名导出并返回默认导出的组件