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

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

How to test material ui autocomplete with react testing library

First of all, you need to make sure the options are not empty array, then do the following: const autocomplete = getByTestId(‘autocomplete’); const input = within(autocomplete).getByRole(‘textbox’) autocomplete.focus() // the value here can be any string you want, so you may also consider to // wrapper it as a function and pass in inputValue as parameter … Read more

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

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 to mock history.push with the new React Router Hooks using Jest

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

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

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

React testing library: Test styles (specifically background image)

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

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

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)