我正在使用 Jasmine Enzyme 浅层渲染测试一个 React 组件。
出于这个问题的目的，在这里简化...
function MyOuterComponent() {
return (
<div>
...
<MyInnerComponent title="Hello" />
...
<MyInnerComponent title="Good-bye" />
...
</div>
)
}
MyOuterComponent 有 2 个 MyInnerComponent 实例，我想测试每个实例的 props。
第一个我知道如何测试。我将 find 与 first 一起使用...
expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello');
但是，我正在努力测试 MyInnerComponent 的第二个实例。
我希望这样的事情会奏效......
expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye');
甚至这个...
expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye');
但当然以上都不起作用。
我觉得我错过了明显的东西。
但是，当我查看 docs 时，我没有看到类似的示例。
任何人？
您想要的是 .at(index) 方法： .at(index) 。
因此，对于您的示例：
expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Good-bye');
如果您要在每一个上测试某些东西，还可以考虑遍历匹配集：
component.find('MyInnerComponent').forEach( (node) => {
expect(node.prop('title')).toEqual('Good-bye')
})
const component = wrapper.find('MyInnerComponent').at(1);
//at(1) index of element 0 to ~
expect(component.prop('title')).to.equal('Good-bye');
TL;博士;
使用 findAll 和 .at(1)
const innerComponent = component.findAll('MyInnerComponent').at(1);
expect(innerComponent).toHaveProp('title', 'Good-bye');
at()与findAll()一起使用，可能与项目的版本有关。