在调用模拟函数后用反应调用实际事件处理程序来开玩笑模拟

Question

我有这个组件测试

    const component = mount(<MemoryRouter><Login/></MemoryRouter>);
    const emailField = component.find('input[type="email"]');
    const passwordField = component.find('input[type="password"]');
    const mockedSubmitFunction=jest.fn();
    component.find(Login).instance().onSubmit=mockedSubmitFunction;
    emailField.simulate('change', { target: { value: testEmail } });
    passwordField.simulate('change', { target: { value: testPassword } });
    component.find('form').simulate('submit');
    expect(mockedSubmitFunction).toBeCalled();

在我拥有的组件中

在构造函数中：-

this.onSubmit = this.onSubmit.bind(this);

和事件处理程序

   onSubmit(event) {
   event.preventDefault(); 

当我在 onSubmit 中设置断点时，它在执行模拟的 onSubmit 后进入组件函数，为什么会发生这种情况。

我以为它只会调用模拟的 onSubmit。

我在做什么不同？

代码沙盒：https://codesandbox.io/s/q95lv7vlrw

但沙箱显示找不到路径中的模块：'object-inspect/util.inspect' 相对于 '/node_modules/object-inspect/index.js' 出于某种原因，我猜这是不相关的

Answer 1

所以你得到了函数模拟，但实际的 onSubmit 被调用。相反，如果您只想调用模拟 fn，则必须提供它（例如，作为测试规范中的道具）。

const mockedSubmitFunction = jest.fn(event => {
  console.log("Mocked function");
});
const component = mount(
  <MemoryRouter>
    <Login login={mockedSubmitFunction} />
  </MemoryRouter>
);

我updated sandbox为你。

您可以另外查看explained example on form testing。

更新：我认为 OP 的实际问题是模拟函数正在触发，但它被复制到实例，因此 expect...toBeCalled() 失败（未调用实际的 mockedFn）。您可以通过将模拟函数作为道具传递、监视函数等来避免这些问题。