You’ve answered your question in the first line. If you want to test your React app end-to-end, connected to APIs and deployed somewhere, you’d use Cypress. react-testing-library‘s aimed at a lower level of your app, making sure your components work as expected. With Cypress, your app might be deployed on an environment behind CDNs, using … Read more
If you’re waiting for appearance, you can use it like this: it(‘increments counter after 0.5s’, async() => { const { getByTestId, getByText } = render(<TestAsync />); fireEvent.click(getByTestId(‘button-up’)); await waitFor(() => { expect(getByText(‘1’)).toBeInTheDocument(); }); }); Checking .toHaveTextContent(‘1’) is a bit “weird” when you use getByText(‘1’) to grab that element, so I replaced it with .toBeInTheDocument().
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
I’m surprised no one here gives the most idiomatic answer yet. You can use getByRole() and pass an accessible name. The accessible name is the text of the button or the value of aria-label attribute. It can be used to query a specific element if multiple elements with the same role are presented on the … Read more
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)
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.
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”)
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
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 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