There are multiple mistakes in your test. Passing component type instead of component instance to render // this is wrong, passing component type baseDom = render(cardComponent); // this is right, passing component instance created with JSX baseDom = render(<cardComponent />); Using mouseMove instead of mouseOver event Searching element by title and passing text instead of … Read more
The react hooks testing library docs go more into depth on this. However, what we essentially are missing is the provider which we can obtain by creating a wrapper. First we declare a component which will be our provider: import { Provider } from ‘react-redux’ const ReduxProvider = ({ children, reduxStore }) => ( <Provider … Read more
If you have const x = “Some string” To test for x using regex, getByText(new RegExp(x, “i”))
as @Giorgio mentioned: fireEvent.click(document) //or userEvent.click(document.body);
That issue is caused by many updates inside Component. I got the same, this is how I solved the issue. await act( async () => { fireEvent.change(fileInput, { target: { files: [file] } }); });
5 months later I’m coming back to answer my question (I’ve learned a lot since posting this question lol)…. First of all, since it is 5 months later I want to underscore that it is better to use the userEvent library instead of fireEvent if possible. I also would be remiss to not call out … Read more
The following worked for me: import userEvent from “@testing-library/user-event”; import { render } from “@testing-library/react”; test(“should submit when pressing enter”, () => { const handleSubmit = jest.fn(); const { getByLabelText } = render(<App handleSubmit={handleSubmit} />); const input = getByLabelText(“Name:”); userEvent.type(input, “abc{enter}”); expect(handleSubmit).toHaveBeenCalled(); });
Have you tried adding EventListener to your scroll container? I’m just not sure with that library you may have just used, but I’m pretty sure, in normal situations, calling scroll fireEvent without listener won’t execute anything. Before your fireEvent, insert something like this: scrollContainer.addEventListener(‘scroll’, () => { /* some callback */ }); and change your … Read more
You can use the returned container. The container is a DOM node and supports the querySelector method, which accepts a CSS selector to find an element. Same approach as in this more detailed answer. For example: const { container } = render(<MyComponent />); const inputEl = container.querySelector(`input[name=”userName”]`);
Just a quick tip, if you have multiple matching elements, you can query like this: HTML: <a href=”/my-element”>My element</a> <a href=”/my-element”>My element</a> TEST: test(‘renders my element’, () => { let link = screen.getAllByText(‘My element’)[0] as HTMLAnchorElement; expect(link.href).toContain(‘/my-element’); });