Couple of issues with your approach. First, creating an onClick mock like that won’t mock your button’s onClick callback. The callback is internal to the component and you don’t have access to it from the test. What you could do instead is test the result of triggering the onClick event, which in this case means … Read more
I had a similar issue which was resolved by calling the event.preventDefault() method. This would need to be called in your ‘onSubmit’ function i think const onSubmit = jest.fn(e => e.preventDefault()); edit: woops forgot to invoke it! 😅
As you already mentioned there is expect().toThrow() 🙂 So in your case: test(“should throw error when not wrapped inside `UserProvider`”, () => { expect(() => render(<TestComponent />)) .toThrow(“Cannot use `useUser` outside of `UserProvider`”); }); Regarding the console.error: Currently there is by design no way to turn off the default error logs. If you want to … 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().
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
Please use the queryByTestId instead getByTestId for the case. It will work.
Here is a working unit testing example: index.tsx: import React, { useState, FC } from ‘react’; export const List: FC<{}> = () => { const [data, setData] = useState<number>(); const getData = (): Promise<any> => { return fetch(‘https://jsonplaceholder.typicode.com/todos/1’); }; React.useEffect(() => { const func = async () => { const data = await getData(); const … Read more
jest-dom toHaveAttribute assertion asserts item attribute while the test tries to test item prop. item prop won’t necessarily result in item attribute, and since it’s non-standard attribute it most probably won’t. react-testing-library propagates functional testing and asserts resulting DOM, this requires to be aware of how components work. As can be seen here, item props … Read more
if you have a label like with Radio Component of Material-ui, you could use: const labelRadio: HTMLInputElement = getByLabelText(‘Label of Radio’); expect(labelRadio.checked).toEqual(false); fireEvent.click(labelRadio); expect(androidRadio.checked).toEqual(true); or you can add https://github.com/testing-library/jest-dom matchers and check it in this way: expect(getByLabelText(‘Label of Radio’)).not.toBeChecked(); fireEvent.click(labelRadio); expect(getByLabelText(‘Label of Radio’)).toBeChecked();
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