测试onclick函数不起作用。返回无法读取未定义的属性'_isMockFunction'

Question

测试onclick函数无法正常工作。返回无法读取未定义的属性“ _isMockFunction”。下面我写了示例代码。

我的页面：myComponent.js

const myComponent = () => {

     const backToDashboard = async ({history})=>{
        history.push("/home");
     }

    const submitResponse = async props => {
      /* url calling here */
      backToDashboard(props)
    }

   return (
       <Button
          className="submitResponse"
          onClick={()=>submitResponse(props)}
        >
          submit Complete
        </Button>
     )
  }
}

导出默认myComponent;

这是我尝试过的代码。测试文件：

    import myComponent from "./myComponent ";

    describe("Container", () => {
      const mockHistory = {
        location: {
          pathname: "/home",
        },
         push: jest.fn()
      };

    beforeEach(() => {
        wrapper = mount(
          <MemoryRouter>
            <Provider store={mockStore(mockInitialState)}>
              <myComponent history={mockHistory} />
            </Provider>
          </MemoryRouter>
        );
      });
    it("should redirect page on click of submitResponse", () => {
        const spy = jest.spyOn(wrapper.instance(), 'submitResponse ');
        const submitButton = wrapper.find(".submitResponse");
        submitButton.simulate("click");
       expect(spy).toHaveBeenCalled();

      });
});

错误：TypeError：无法读取未定义的属性'_isMockFunction'

Answer 1

我认为我要说的是，也许您没有测试正确的东西？

例如，如果有人更改了'submitResponse'函数名称，您当前正在编写的测试将会中断-但从用户的角度来看，该功能可能不会中断。

我建议测试一下单击按钮（监视fetch或其他方法）时API调用发生以及将用户推到仪表板路线的事实。这样，您可以随意更改实现细节，并且只要功能本身不发生变化，您的测试就会继续通过：）。

describe("Container", () => {
  const mockHistory = {
    location: {
      pathname: "/home",
    },
     push: jest.fn()
  };

  beforeEach(() => {
    wrapper = mount(
      <MemoryRouter>
        <Provider store={mockStore(mockInitialState)}>
          <myComponent history={mockHistory} />
        </Provider>
      </MemoryRouter>
    );
  });

  it("should redirect page on click of submitResponse", () => {
    const submitButton = wrapper.find(".submitResponse");
    submitButton.simulate("click");
    expect(mockHistory.push).toHaveBeenCalledWith("/home");
  });
});

Answer 2

测试的问题是，在监视组件之前先安装组件。因此，您的间谍将与原始间谍绑定，而不是与模拟绑定。试试这个，

import myComponent from "./myComponent ";

describe("Container", () => {
  const mockHistory = {
    location: {
      pathname: "/home",
    },
     push: jest.fn()
  };

beforeEach(() => {
    wrapper = mount(
      <MemoryRouter>
        <Provider store={mockStore(mockInitialState)}>
          <myComponent history={mockHistory} />
        </Provider>
      </MemoryRouter>
    );
  });
it("should redirect page on click of submitResponse", () => {
    const spy = jest.spyOn(wrapper.instance(), 'submitResponse ');
    wrapper.instance().forceUpdate()
    wrapper.update()
    const submitButton = wrapper.find(".submitResponse");
    submitButton.simulate("click");
    expect(spy).toHaveBeenCalled();

  });
});

希望这会起作用！！