[英]testing-library Error: mockConstructor(…): Nothing was returned from render
我正在编写许多测试,但对于其中一个,我得到了 mockConstructor 错误,告诉我我没有渲染任何东西。 (在“reconcileChildFibers”:node_modules/react-dom/cjs/react-dom.development.js:14348:23))
虽然在工作之前进行了完全相同的测试:/我刚刚花了一天的时间,没有更多的想法。
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/user-event": "^7.1.2",
“反应域”:“^16.13.1”,
这是要测试的组件
const DeleteModal: React.FC<IDMProps> = ({ out, setOut, deleteModal, setDeleteModal, name, externalId }) => {
const [sending, setSending] = React.useState<boolean>(false);
const handleDelete = async (e: React.FormEvent) => {
e.preventDefault();
...
setTimeout(() => {
...
}, 300);
}
return (
<div className="modal light">
<div className={out ? "delete-modal out" : "delete-modal"} >
<div className="flex-end">
<FontAwesomeIcon icon="times" size="2x" color="#e9e4dd" className="cursor"
onClick={() => setDeleteModal(!deleteModal)} />
</div>
<div className="p-30">
<p>Are you sure you want to</p>
<p>delete the reward</p>
<p>{name.toUpperCase()} ?</p>
<button data-testid="button" onClick={handleDelete}>
{sending ?
<Loader type="ThreeDots" color="white" height="20" width="20" />
:
"YES DELETE"
}
</button>
</div>
</div>
</div>
);
};
这是我的两个测试,只有第一个有效,第二个被卡住了 fireEvent: Uncaught [Error: mockConstructor(...): Nothing was returned from render. 这通常意味着缺少 return 语句。 或者,不渲染任何内容,返回 null。]
describe("delete modal as a forms component", () => {
it("should leave modal when clicking on right cross", async () => {
const { getByText } = render(
<DeleteModal
out={false} setOut={setOut}
deleteModal={true} setDeleteModal={setDeleteModal}
name={name} externalId={externalId} />
);
getByText("BEAUTY ?"); // OK
getByText("YES DELETE"); // OK
await act(async () => {
fireEvent.click(document.getElementsByClassName('cursor')[0]); // OK
});
expect(...)
});
it("when clicking on button, should delete reward, adding 'out' className for animation purpose then leave modal", async () => {
const { getByText, getByTestId } = render(
<DeleteModal
out={false} setOut={setOut}
deleteModal={true} setDeleteModal={setDeleteModal}
name={name} externalId={externalId} />);
getByText("YES DELETE"); // OK
await act(async () => {
fireEvent.click(getByText("YES DELETE")); //Error
fireEvent.click(getByTestId("button")); //also Error
});
expect(...)
});
});
挖掘装载机是一个很好的答案,我嘲笑它但忘了做一个假的回报:
jest.mock('react-loader-spinner', () => {
return {
__esModule: true,
A: true,
default: () => {
return <div>This is the loader</div>;
},
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.