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。

我在做什么不同的事情？

CodeSandbox：https://codesandbox.io/s/q95lv7vlrw

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

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()失败了（实际上没有调用嘲讽Fn）。通过将模拟函数作为道具传递，监视函数等，可以避免这些问题。

嘲笑嘲笑在调用模拟函数后调用实际事件处理程序

1 个答案: