This seems to be the #1 question that is found when someone Googles “Cannot read property ‘createEvent’ of null”, so leaving this answer here for those readers: For me this error came in the midst of a test. When executing a series of tests, some test or the other used to fail with this error, … Read more
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
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
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
I chose to add the polyfill as a dev dependency and add the following line to setupTests.js/ts: global.ResizeObserver = require(‘resize-observer-polyfill’)
Update Use toBeEmptyDOMElement since toBeEmtpy has been deprecated. You can use jest-dom’s toBeEmpty: const { container } = render(<MyComp ItemLength={1} />) expect(container.firstChild).toBeEmpty()
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
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
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
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