Question

如果您有这样的组件

class Editor extends Component {
  handleChange() {
    // some code
  }

  render() {
     <div>
       <input className="Editor" onChange={this.handleChange} />
     </div>
  }
}

通过像下面这样的模拟来模拟更改事件来测试句柄更改是否更好：

wrapper.simulate（'change'，{//}）

或通过使用实例直接调用方法：

wrapper.instance（）。handleChange（）

Answer 1

如果您使用的是Shallow Rendering，那么.simulate只会尝试find the right prop和call it。来自Common Gotchas section for .simulate：

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

使用“浅层渲染”时调用.simulate没有任何优势，直接调用prop可以避免由于事件未映射到正确的prop而导致的问题。

如果您使用的是Full DOM Rendering，那么.simulate will fire an event最终会从可笑的runEventsInBatch中调用ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events。

因此，将.simulate与mount一起使用实际上会模拟该事件，只需从Common Gotchas section中注意到：

ReactWrapper将SyntheticEvent对象传递给代码中的事件处理程序。请记住，如果您要测试的代码使用的是SyntheticEvent中未包含的属性，例如event.target.value，则需要提供一个模拟事件...使其起作用。

对于完整DOM渲染，由您决定让ReactDOM模拟事件以调用处理程序还是直接调用处理程序是否具有任何价值。

来自Airbnb开发者的this post：

总的来说，我发现最好直接调用该道具并避免使用.simulate。

为了进行测试，它看起来像这样：

test('onChange', () => {
  const wrapper = shallow(<Editor />);  // works with shallow or mount
  const onChangeHandler = wrapper.find('input').prop('onChange');
  // test onChangeHandler
})

用酶测试React组件时，最好使用Simulation或直接在instance（）上调用该方法？

1 个答案: