在自定义事件上使用酶模拟?

IT技术 javascript testing reactjs enzyme
2021-05-20 15:36:15

可以在自定义事件上使用 Enzyme 的方法 .simulate()。例如:

// Code
<Element onFoo={someFunction}></Elements>

// Test
const element = shallow(<Element>);
element.simulate('foo');

这是应该使用酶测试自定义事件的方式还是使用 s.th. 的更好方法?喜欢:

//Test
const element = shallow(<Element>);
element.props.onFoo()
4个回答

似乎.simulate()没有实现自定义事件。github 上有一个问题,讨论了这个话题,一位Enzyme维护者建议使用您提供的第二种方法:

wrapper.find(Child).prop('customEvent')(fakeEvent)

您可以.simulate()在自定义事件上使用有一个问题,您必须将其on用作自定义事件的前缀。例如。onJump,onAdd是您命名自定义事件的方式。

element.props.onFoo()在上述情况下并没有真正测试功能。它只测试组件的内部结构,因此绑定保持未经测试。由于实现与测试代码相结合,重构也变得困难。

您可以参考此博客,了解该场景的工作演示以及如何测试具有自定义事件的组件。

除了其他答案之外,如果您正在测试使用您的Element组件的父组件:

不确定这是否也是版本问题。但是我正在使用酶 2.9.1,这就是我触发子自定义函数的方式:

wrapper.find(Child).prop('customEvent')(/*args*/)

但它实际上不是已经在当前的浅层渲染中工作了吗?

/* Film component */
render() {
  return (
    ...
    <FilmHeader onSearchClick={this.handleSearchClick}>
    ...
  )
}

/* Test */
const wrapper = shallow(<Film {...props} />);
wrapper.find('FilmHeader').simulate('searchClick');

前面提到的酶问题仍然悬而未决。并且文档没有说明任何关于此功能的明显信息。所以也许问题是文档本身。