![](/img/trans.png)
[英]Testing if a prop function was called using react-testing-library and jest
[英]Asserting prop call for form submit in React using React Testing Library
您可以在以下代码和框中重现该问题:
作为示例,我制作了一个组件,每次单击表单按钮时,该组件使用以下代码获取随机图像:
import { Button } from "antd";
...
class ContinuousMemeDeliveryApi extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
static defaultProps = { getImage };
state = { image: images[0], random: 0 };
handleClick = async e => {
e.preventDefault();
const { data } = await this.props.getImage();
this.setState({ image: data.image, random: data.random });
};
...
render() {
return (
<form onSubmit={this.handleClick}>
<Button htmlType="submit">Click Me</Button>
...
</form>
);
}
这可以按预期工作,并且我编写了以下代码来测试实现:
test("loads random memes on click", async () => {
const mockGetImage = jest.fn(() =>
Promise.resolve({ data: { image: "testImage.jpg" } })
);
const { getByText } = render(
<ContinuousMemeDeliveryApi getImage={mockGetImage} />
);
const clickMeButton = getByText(/click/i);
fireEvent.click(clickMeButton);
// @TODO: fix assertion
expect(mockGetImage).toHaveBeenCalledTimes(1);
});
但是,测试失败并显示以下错误消息:
expect(jest.fn()).toHaveBeenCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times.
关于失败的任何想法?
由于在同一文档(您的应用程序和测试)中有2个反应根渲染,因此不能将默认document.body
用作反应测试库的基础元素。
使用当前方法,您的查询实际上在应用程序中找到的元素不在呈现的测试中,因为它们绑定到baseElement = document.body
并且div#container
首先出现。 这就是为什么根本不调用模拟的原因。
您可以添加其他容器来隔离测试DOM树
// index.html
<div id="test-container"></div>
现在您可以在渲染测试时指定容器
import { render as rtlRender, fireEvent, wait } from "react-testing-library";
// get the container
const container = document.getElementById('test-container')
// override render to provide custom container
const render = (ui, options = {}) => rtlRender(ui, { container, ...options })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.