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

Question

我有以下组件：

// 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 and 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 组件？

Answer 1

在这种情况下，您可以做几件事。 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';

Answer 2

尝试在您的文件顶部导入 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);