Question

以下问题：

我有这个组件：

const TodoHeader = ({ handleChange, handleSubmit }) => {
  return (
    <form onSubmit={e => handleSubmit(e)}>
      <input
        type="text"
        onChange={e => handleChange(e.target.value)}
        placeholder="your todo.."
      />
    </form>
  );
};

经过以下测试：

it("should call the passed in handleSubmit function with the event object", () => {
    const handleSubmit = jest.fn();
    const wrapper = mount(<TodoHeader handleSubmit={handleSubmit} />);
    const form = wrapper.find("form");
    console.log(form.debug());
    const mockEvent = { target: {} };

    form.simulate("submit", mockEvent);

    expect(handleSubmit).toHaveBeenCalledWith(mockEvent);
    // Why does this work with shallow but not with mount?
  });

这将失败，因为已使用实际的onSubmit事件调用了该函数。虽然如此，我还是用我的自定义对象来模拟它。

当我用shallow而不是mount进行操作时，它将通过

我不明白为什么。

这里有一个小小的codeandbox，可以用来测试。

https://codesandbox.io/s/72yl24j59q

Answer 1

您不必测试onSubmit是否可以与您传递的事件对象一起使用-这将测试React本身和浏览器，这与您无关。

我已经更新了您提供的codeandbox链接，并且根据测试，所有测试用例现已通过。

https://codesandbox.io/s/0op31650rp

您需要测试的是传递模拟功能时，该功能在表单提交后触发。

为什么在使用酶的“ mount”函数时我的笑话模拟函数没有与模拟对象一起执行？

1 个答案: