为什么 jest mock 函数没有在我的反应测试库测试中执行?
Why does the jest mock function not getting executed in my test with react testing library?
问题
我创建了一个非常基本的代码示例以便更好地说明。
这是我要测试的代码(包含简单的反应挂钩):
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();
});
跟react hooks有关系吗?我也尝试重新渲染它,但结果相同。
我不知道为什么这不会通过。错误信息是:
Expected mock function to have been called, but it was not called.
这里有一个 codesandbox,如果你想玩的话:
https://codesandbox.io/s/ypok50n709
(TodoHeader.js
和 TodoHeader.test.js
)
看起来这是一个简单的问题,cleanup
实际上并没有在 afterEach
中被调用。这意味着在第二次测试期间 document
中呈现了两个 form
元素,而 getByTestId
返回第一个。
改变
afterEach(() => cleanup)
要么
afterEach(() => cleanup())
或者只是
afterEach(cleanup)
问题
我创建了一个非常基本的代码示例以便更好地说明。 这是我要测试的代码(包含简单的反应挂钩):
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();
});
跟react hooks有关系吗?我也尝试重新渲染它,但结果相同。 我不知道为什么这不会通过。错误信息是:
Expected mock function to have been called, but it was not called.
这里有一个 codesandbox,如果你想玩的话:
https://codesandbox.io/s/ypok50n709
(TodoHeader.js
和 TodoHeader.test.js
)
看起来这是一个简单的问题,cleanup
实际上并没有在 afterEach
中被调用。这意味着在第二次测试期间 document
中呈现了两个 form
元素,而 getByTestId
返回第一个。
改变
afterEach(() => cleanup)
要么
afterEach(() => cleanup())
或者只是
afterEach(cleanup)