我有以下组件:
// 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
组件?
最佳答案
在这种情况下,您可以做几件事。 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';
关于unit-testing - 当组件是无状态功能时,使用 Enzyme 按显示名称查找组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35393815/