Question

可以在自定义事件上使用Enzyme的方法.simulate（）。例如：

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

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

这是使用Enzyme测试自定义事件的方式还是使用s.th.的更好方法像：

//Test
const element = shallow(<Element>);
element.props.onFoo()

Answer 1

似乎没有实现自定义事件的.simulate()。在github上有一个issue，其中讨论了这个主题，其中一个 Enzyme 维护者建议使用你提供的第二种方法：

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

Answer 2

但它实际上是否已经在当前浅层渲染中工作了？

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

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

上述酶[{3}}仍然开放。并且文档没有说明有关此功能的任何明显信息。所以问题可能就是文档本身。

Answer 3

对我来说有用的，尝试在不是顶级组件的组件上对自定义事件进行siumlate如下：

ProjectName
-- Pages          <--- The page i want to render is in this folder
-- App.config
-- App.xaml
-- MainWndow.xaml <--- i want to render the page here

如果myComponent是一个React组件，onThingSelected是完全按照组件命名的自定义事件处理程序，而newThing是事件处理程序所期望的类型的对象。

Answer 4

除了其他答案之外，如果您要测试使用Element组件的父组件：

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

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

Answer 5

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

在上述情况下，

element.props.onFoo()并未真正测试该功能。它仅测试组件的内部，因此绑定未经测试。此外，随着实现与测试代码的结合，重构也变得困难。

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

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

5 个答案: