2

问题

我创建了一个非常基本的代码示例以进行更好的说明。这是我要测试的代码（包含简单的反应钩子）：

const TodoHeader = ({ handleSubmit }) => {
  const [value, setValue] = useState("");

  return (
    <form onSubmit={handleSubmit} data-testid="form">
      <input
        type="text"
        placeholder="Your Todo.."
        onChange={e => setValue(e.target.value)}
        value={value}
        data-testid="input"
      />
    </form>
  );
};

我想测试传入的handleSubmit道具是否会被执行。所以我设置了这个测试：

it("should call the passed in onSubmit function", () => {
    const mockFn = jest.fn();

    const { getByTestId } = render(
      <TodoHeader handleSubmit={mockFn} />
    );
    const form = getByTestId("form");
    fireEvent.submit(form);
    // This will fail (did not get executed)
    expect(mockFn).toHaveBeenCalled();
  });

它与反应钩子有关吗？我也尝试重新渲染它，但结果相同。我不知道为什么这不会通过。错误信息是：

预期的模拟函数已被调用，但未被调用。

如果你想玩它，这里是一个代码框：

https://codesandbox.io/s/ypok50n709 （TodoHeader.js和TodoHeader.test.js）

4

1 回答 1

3

看起来这是一个简单的问题，cleanup实际上并没有被调用afterEach。这意味着在第二次测试期间有两个form元素呈现并返回第一个。documentgetByTestId

改变

afterEach(() => cleanup)

要么

afterEach(() => cleanup())

要不就

afterEach(cleanup)
于 2019-02-07T19:27:00.853 回答