在Jest中的兩個不同的測試塊中模擬相同的功能

Question

我有一個關於在Jest中創建函數模擬的問題。 我的頁面上有兩個元素，它們在我的React組件中調用了不同的函數。 這兩個函數都調用相同的函數，該函數從道具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();
    });
  });