如何使用反应测试库测试条件渲染元素

Question

我正在尝试通过测试来覆盖我的功能，我有图像输入：

<input
    data-testid="fileuploadtestid"
    type="file"
    accept="image/*"
    capture="camera"
    onChange={uploadImage}
/>

更改方法检查是否提供文件并创建 link;

const uploadImage = (e) => {
    const { files } = e.target;

    if (files?.length) {
      const url = URL.createObjectURL(files[0]);

      setImageUrl(url);
    } else {
      setImageUrl("");
    }
  };

基于 imageUrl 值图像有条件地呈现：

{imageUrl && (
    <img
      data-testid="prevtestid"
      className="preview_img"
      src={imageUrl}
      alt={imageUrl}
      crossOrigin="anonymous"
      ref={imageRef}
     />
  )}

我想检查它是否使用 react testing library 正确呈现以获取我使用的图像元素 data-testid="prevtestid":

test("renders learn react link", async () => {
  const { container, rerender } = render(<Home />);
  global.URL.createObjectURL = jest.fn();
  const file = new File(["(⌐□_□)"], "pug.png", { type: "image/png" });

  const input = screen.getByTestId("fileuploadtestid");
  fireEvent.change(input, { target: { files: [file] } });

  rerender(<Home />);
expect(screen.getByTestId("prevtestid")).toBeInTheDocument();
}
);

我附上了我尝试实现的最新版本，我尝试以各种方式使用 waitFor、rerender、render，但我都遇到了同样的错误时间： Unable to find an element by: [data-testid="prevtestid"].

请告诉我如何测试它？

Answer 1

您正在创建的模拟并不是真正的 returning 任何东西。您应该 return 一个 url 以便组件得到一个 imageUrl 然后能够显示 <img /> 元素。

global.URL.createObjectURL = jest.fn().mockReturnValueOnce('https://www.samplerandomdomain.com/images/123.jpg');

如何使用反应测试库测试条件渲染元素

How to test condition rendered elements with react testing library

javascript

testing

unit-testing

reactjs

react-testing-library