getByText looks for the text inside a node. So in this example: <div class=”foo”>bar</div> the text is bar. getByAltText is the best way to find an image. Another way is to use getByTestId. What if you must find an element by class? In these cases, you can use container which is returned by render. container … Read more
React Testing Library and Jest both have different responsibilities “react testing library” is not a test runner meaning when u enter command npm test or npm run test it is jest responsibility that collect all the files ending with .test.js and runs each test case and show pass and fail results in your console like … Read more
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
The key is to await act and then use async arrow function. await act( async () => render(<TestApp/>)); Source: https://stackoverflow.com/a/59839513/3850405
In your package.json, or jest.config.js/jest.config.ts file, change the value of the testEnvironment property to jsdom. package.json “jest”:{ “testEnvironment”: “jsdom” } jest.config.[js|ts] module.exports = { “testEnvironment”: “jsdom” } Important note for jest >28 If you are using jest 28, you will need to install jest-environment-jsdom separately by either: npm: npm i jest-environment-jsdom –save-dev yarn: yarn add … Read more
material-ui’s select component uses the mouseDown event to trigger the popover menu to appear. If you use fireEvent.mouseDown that should trigger the popover and then you can click your selection within the listbox that appears. see example below. import React from “react”; import { render, fireEvent, within } from “react-testing-library”; import Select from “@material-ui/core/Select”; import … Read more
ReactTestUtils gives you the bare minimum to test a React component. I haven’t seen it being used for big applications. Enzyme and react-testing-library are both good libraries that give you all the tools you need to test your application. They have two different philosophies though. Enzyme allows you to access the internal workings of your … Read more
adding import React from “react” React.useLayoutEffect = React.useEffect to my frontend/src/setupTests.js test file is a way to suppress the jest warning. Ultimately, this looks to be an issue with Material-UI components having issues with Jest.
This is the approach that Kent C. Dodds (the creator of RTL) shared with me after discussing it with him: import FetchNextPageButton from ‘FetchNextPageButton’ jest.mock(‘FetchNextPageButton’, () => { return jest.fn(() => null) }) // … in your test expect(FetchNextPageButton).toHaveBeenCalledWith(props, context)
A good solution for this is the closest function. In description of closest function is written: Returns the first (starting at element) including ancestor that matches selectors, and null otherwise. The solution would look like this: screen.getByText(“span text”).closest(“div”)