reactjs - 如何使用 jest 监视 setState 并测试 toHaveBeenCalled()

Question

使用 Jest 和 React，我如何监视一个 this.setState()并测试功能 hasBeenCalled()

it('shall update targets when engine register has been called', () => 
{
  const wrapper = shallow(
    <LazyloadProvider>
      <p>Wow</p>
    </LazyloadProvider>
  ).instance();
  expect(wrapper.state.targets).toEqual({}); // pass
  wrapper.engine.register(FIXTURE.REACT_REF); // pass
  expect(wrapper.state.targets).not.toEqual({}); //pass
  expect(wrapper.setState).toHaveBeenCalled(); // fail
});

发动机 setter/getter :

  get engine() {
    return {
      state: this.state,
      register: target => {
        this.setState(LazyloadUtils.registerOneTarget(target));
      },
    };
  }

Answer 1

理想情况下，您需要检查 setState 方法正在更新的状态对象中的键

expect(wrapper.state('foo')).toEqual('bar')

如果你真的想窥探方法本身，你可以在组件原型(prototype)上模拟 setState 方法。您需要在创建组件的浅拷贝之前执行此操作。

it('shall update targets when engine register has been called', () => 
 {
   LazyloadProvider.prototype.setState = jest.fn();
   const wrapper = shallow(
      <LazyloadProvider>
        <p>Wow</p>
      </LazyloadProvider>
    ).instance();
   expect(wrapper.setState).toHaveBeenCalled();
 }