React 组件中的 Spy 方法答案

【问题标题】：Spy method in react componentReact 组件中的 Spy 方法
【发布时间】：2017-04-30 22:06:18
【问题描述】：

我的组件有一个方法..

onUpdateProperty = (key, value) => {
  this.state.formData[key] = value;
}

我想测试改变输入后是否调用了这个方法...

it('on update input should update formData', function () {
  const wrapper = mount(<MyComp.wrappedComponent {...this.minProps} />);
  const spy = spyOn(wrapper.instance(), 'onUpdateProperty');

  expect(spy).not.toHaveBeenCalled();

  const nameInput = wrapper.find('[name="name"]');
  nameInput.simulate('change', {
    target: { name: 'name', value: 'v1' },
  });

  wrapper.update();

  // expect(spy).toHaveBeenCalledWith('name', 'v1');
  expect(spy).toHaveBeenCalled();
});

wrappedComponent 是因为我使用 Mobx-react

【问题讨论】：

标签： reactjs jestjs enzyme mobx-react

【解决方案1】：

我的建议是不要窥探组件的内部功能，而只是测试state。

expect(wrapper.state.formData.name).toBe('v1)

如果你真的想监视它，你必须监视组件的原型。

jest.spyOn(MyComp.wrappedComponent.prototype, 'onUpdateProperty')

【讨论】：