如何使用酶和 sinon 模拟点击子元素？

Question

我正在使用酶和 sinon，尝试使用此测试用例时收到此错误：

期望值等于：true 收到：false

在控制台中使用时.debug()我看到：

显然没有调用 click 的事件处理程序。

我怀疑这个问题可能与.simulate('click', onLocationClick).

你能帮我看看我在这里做错了什么吗？谢谢。

 console.log src\forecast\locationFinder\LocationFinder.test.js:28
      <Location country="CZ" id={3067696} name="Prague" onLocationClick={[Function]} />

 console.log src\forecast\locationFinder\LocationFinder.test.js:28
      <Location country="CZ" id={3067696} name="Prague" onLocationClick={[Function]} />

Answer 1

来自官方酶文档：

• 目前，浅层渲染器的事件模拟不会像人们在真实环境中通常期望的那样传播。因此，必须调用.simulate()设置了事件处理程序的实际节点。

• 尽管名称暗示这模拟了一个实际事件，但 .simulate()实际上会根据您提供的事件定位组件的 prop。例如，.simulate('click')将实际获取onClick道具并调用它。

牢记以上两点，您可以尝试以下操作：

1. 注册事件

检查是否onLocationClick在click事件中注册。它有另一个事件名称locationclick吗？很可能，它根本没有注册为事件，只是一个 prop 函数。

2. 底层组件

是否<Location />封装了onClick()定义了处理程序的另一个组件或元素？如果是，则.find()通过向下潜入该元素wrapper并对其进行模拟click。例如

wrapper.find({ id: 3067696 }).dive().find('li > a').simulate('click');
expect(onLocationClick.called).toEqual(true);

就像@GibboK 所做的那样，您还可以将底层元素存储为常量，并在模拟点击之前检查它是否存在。