javascript - 测试库错误:mockConstructor(...):没有从渲染返回
问题描述
我正在编写许多测试,但对于其中一个,我得到了 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”,
“react-dom”:“^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>
);
};
这是我的 2 个测试,只有第一个有效,第二个被 fireEvent 卡住:Uncaught [Error: mockConstructor(...): Nothing is 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>;
},
}
});
推荐阅读
- javascript - 在叠加图像下绘制新路径
- ruby-on-rails - Rails 模型关联 - has_one 还是单表继承?
- android - 将脚本添加到 AOSP
- css - 使用 Bulma 为 Vue 中的活动链接设置样式
- javascript - 无法在 JavaScript 上创建滚动效果
- html - 边距右:自动和边距左:自动不工作
- python - 如何将aws glue的python shell连接到oracle数据库
- google-apps-script - Google Apps 脚本幻灯片向形状添加阴影
- git - Git 合并冲突已解决,没有要提交的更改
- remote-desktop - 几次成功连接后无法远程连接到我的电脑?