react-testing-library

react-testing-library – how to simulate file upload to a element?

by

I found a bit hacky solution and I’m not sure if it match the best practises in testing but I will share it with you it might help describe(“Upload files”, () => { let file; beforeEach(() => { file = new File([“(⌐□_□)”], “chucknorris.png”, { type: “image/png” }); }); test(“cover photo upload”, async () => { … Read more

React Testing Library gives console error for ReactDOM.render in React 18

by

To solve the react testing library error: “ReactDOM.render is no longer supported in React 18, update the version of the react testing library.” Open your terminal in the root directory of your project and run the following commands: npm install –save-dev @testing-library/react@latest npm install –save-dev @testing-library/jest-dom@latest npm install –save-dev @testing-library/user-event@latest Make sure to update the … Read more

How do you check a checkbox in react-testing-library?

by

To check or uncheck the checkbox using react-testing-library, you simply want to fireEvent.click the checkbox. There was a discussion about this on react-testing-library Issue #175. In particular, kentcdodds said: this should probably be documented better, but with checkboxes you don’t actually fire change events, you should fire click events instead. But, based on the code … Read more

React testing library: The given element does not have a value setter when fireEvent change on input form

by

Problem here is TextField is an abstraction in MaterialUI. It consists of FormControl, Label and Input. Clean way of solving this problem is: First, add InputProps on your TextField, with data-testid attribute. // YourComponent.js <TextField onChange={event => setContent(event.target.value)} id=”content” inputProps={{ “data-testid”: “content-input” }} value={content} label=”Content” /> Then simply query using this ID. // YourComponent.test.js const … Read more

How to mock history.push with the new React Router Hooks using Jest

by

Use jest.mock in module scope will automatically be hoisted to the top of the code block. So that you can get the mocked version react-router-dom in NotFound.jsx file and your test file. Besides, we only want to mock useHistory hook, so we should use jest.requireActual() to get the original module and keep other methods as … Read more

How do I test that a child component is rendered?

by

You shouldn’t check if your child component is rendered or not, because it’s testing implementation details (which testing library doesn’t encourage you to do). You can check some text from your child component is rendered or you can give data-testid to your wrapper element in child and then use .toBeInTheDocument from @testing-library/jest-dom expect(getByText(/some text/i)).toBeInTheDocument(); or … Read more

React testing library: Test styles (specifically background image)

by

getByText won’t find the image or its CSS. What it does is to look for a DOM node with the text you specified. In your case, I would add a data-testid parameter to your background (<div data-testid=”background”>) and find the component using getByTestId. After that you can test like this: expect(getByTestId(‘background’)).toHaveStyle(`background-image: url(${props.image})`) Make sure you … Read more

React Testing Library: When to use userEvent.click and when to use fireEvent

by

Behind the scenes, userEvent uses the fireEvent. You can consider fireEvent being the low-level api, while userEvent sets a flow of actions. Here is the code for userEvent.click You can see that depending of which element you are trying to click, userEvent will do a set of different actions (e.g. if it’s a label or … Read more