在 react 中测试一个 onclick 组件

Question

我在 React 中有一个组件 A 它有一个这样的数组：

const mainArray=
[
{
"element1": "",
"element2":[],
"element3": "",
"element4": true
},
{
"element1": "",
"element2":[],
"element3": "",
"element4": false
}
]

从组件 A 开始，主数组被循环，组件 B 和组件 C 根据元素 4 的值被调用

state.mainArray
.map((arrayElement, index) => {
return arrayElement.element4 ? <ComponentB  
property1={state.mainArray
[index].element2} componentAMethod={this.componentAMethod} />
: <Componentc  property1={state.mainArray
[index].element2} componentAMethod={this.componentAMethod}/>
}
)

组件 B 和 C 有一个 react 表，它呈现来自 element2 的数据(作为属性 1 传递( 在组件 B 和 C 中的一个反应表单元格中有一个 onclick 按钮，它指向该组件 childComponentMethod 中的方法，该方法随后指向组件 AMethod

组件 B 和 C 中的方法：

childComponentMethod = (arg1, arg2) => {
this.props.componentAMethod(arg1,arg2)
}

在 B 和 C 中反应表单元格

<a 
onClick={() =>this.childComponentMethod(arg1,arg2)}> 
</a>

问题是，我如何测试组件B和C的onlick功能？

Answer 1

如果 ComponentB/Cclick事件可以被模拟，那么使用带有jest.fn()的相关道具来模拟它们。 如果他们无法被模拟，那么只有当他们的click更改任何state(通过asserting相关state(时，您才能test他们的点击事件。

无论哪种情况，

如果find('a')可能导致不正确(我们不感兴趣(元素。 你应该为具有onClick事件的a元素的"单元格"(特殊className或某些data-*(提供一个标识符。 比方说className="clickableAnchor"，

然后const wrapper = mountYourComponent();

然后wrapper.find('.clickableAnchor').first().simulate('click')

然后，您可以检查模拟jest.fn()的clicklength或检查相关的state更改。

有帮助吗？