在 Jest 的两个不同测试块中模拟相同的功能

Question

我有一个关于在 Jest 中创建函数模拟的问题。我的页面上有两个元素在我的 React 组件中调用不同的函数。这两个函数都调用同一个函数，该函数是从 props 传入的，onFieldChanged。我想模拟这两个元素的变化，并确认props.onFieldChanged被调用了。

当我编写第一个测试（下面的第一个测试）时，它以优异的成绩通过。当我编写第二个测试时，第二个测试通过了，但现在第一个测试失败了。基本上，我不能同时通过两个测试。我需要以某种方式重置模拟吗？有谁知道怎么做？

什么给了？

  describe('user selects checkbox', () => {
    props.onFieldChanged = jest.fn();
    const wrapper = shallow(<DateOptions {...props} />);
    it('calls the onFieldChanged function', () => {
      const element = wrapper.find('#addOneToStudyDays');
      element.simulate('change');
      expect(props.onFieldChanged).toHaveBeenCalled();
    });
  });

  describe('user types in input', () => {
    props.onFieldChanged = jest.fn();
    const wrapper = shallow(<DateOptions {...props} />);
    it('calls the onFieldChanged function', () => {
      const element = wrapper.find('#lowerTimeLimit');
      element.simulate('change');
      expect(props.onFieldChanged).toHaveBeenCalled();
    });
  });

Answer 1

尝试将 jest.fn() 作为不同的变量传递：

  describe('user selects checkbox', () => {
    it('calls the onFieldChanged function', () => {
      const onFieldChanged = jest.fn();
      const wrapper = shallow(<DateOptions {...props, onFieldChanged} />);
      const element = wrapper.find('#addOneToStudyDays');
      element.simulate('change');
      expect(props.onFieldChanged).toHaveBeenCalled();
    });
  });

  describe('user types in input', () => {
    it('calls the onFieldChanged function', () => {
      const onFieldChanged = jest.fn();
      const wrapper = shallow(<DateOptions {...props, onFieldChanged} />);
      const element = wrapper.find('#lowerTimeLimit');
      element.simulate('change');
      expect(props.onFieldChanged).toHaveBeenCalled();
    });
  });