React - 如何在 2021 年测试图像 onload 或 onerror

如何解决React - 如何在 2021 年测试图像 onload 或 onerror

我正在使用 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