问题描述
我正在使用 react-tesing-lib 进行测试,并且我有一个在整个项目中共享的图像组件。我正在尝试使用带有 jsdom
的默认 CRA 构建来测试组件。事实证明这有点难以实施,我检查了一些资源。
我将 jest(26.6.0) 和 jsdom(16.6.0) 更新到最新版本。我也试过 canvas
jest-canvas-mock
库
Image.js
import { useState } from "react";
export default function Image({ src = "" }) {
const [status,setStatus] = useState("Loading")
const handleOnLoad = () => {
setStatus("handleOnLoad");
};
const handleOnError = () => {
setStatus("handleOnError");
};
return (
<div>
{status}
<img alt={status} width="50" src={src} onLoad={handleOnLoad} onError={handleOnError} />
</div>
);
}
Image.test.js
import { render,screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import "jest-canvas-mock";
import Image from "./Image";
describe('Test',() => {
it("Image shouldss render correctly",async () => {
render(<Image src="LOAD_SUCCESS_SRC" />);
await screen.findByText(/handleOnLoad/i);
});
})
最后,jsdom
无法执行 on 事件。基于此comment
浏览器在配置为不加载图像时不会触发加载事件。 jsdom 默认配置为不加载任何外部资源,因此它在这方面遵循浏览器。这使图像与其他未加载的资源(如视频、音频、链接 rel=preload 等)保持一致。
这里是完整的source code
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)