How to test condition rendered elements with react testing library

Question

I'm trying to cover my functionality with test, i have the image input:

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

On change method checks if file provided and creates the link;

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

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

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

Based on imageUrl value image renders conditionally:

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

And i want to check if it renders correctly using react testing library to get the image element I use 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();
}
);

I attached the latest version what have i tried to implement, i tried to use waitFor, rerender, render in various ways but i'm getting the same error all time: Unable to find an element by: [data-testid="prevtestid"].

Please tell me how can i test it ?

Emmanuel Ponnudurai · Accepted Answer · 2021-08-27 07:09:04Z

1

The mock that you are creating is not really returning anything. You should return a url so that the components get's an imageUrl and is then able to show the <img /> element.

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

answered Aug 27, 2021 at 7:09

Emmanuel Ponnudurai

1,0948 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to test condition rendered elements with react testing library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related