I'm writing a test for a component that uses a search form. This is in search.js and it imports a Formik form from another file searchForm.js.
I've written this unit test which passes. I've based it off an example in the react testing docs here.
Every time I run it I get this error, which confuses me since I've wrapped all the code in act?
console.error
Warning: An update to Formik inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
import React from "react";
import { render, screen, act, fireEvent } from "@testing-library/react";
import Search from "./search.js";
import { ChakraProvider } from "@chakra-ui/react";
test("Search form input", () => {
act(() => {
const setup = () => {
const utils = render(
<ChakraProvider>
<Search />
</ChakraProvider>
);
const searchTermsInput = utils.getByLabelText("search terms input");
return {
searchTermsInput,
...utils,
};
};
const { searchTermsInput } = setup();
fireEvent.change(searchTermsInput, { target: { value: "23" } });
});
expect(screen.getByLabelText("search terms input").value).toBe("23");
});
As per the comment above, fixed this by rewriting the test as follows to allow for some other changes to state that happen in the search.js component which weren't part of this specific test.
import React from "react";
import { render, screen, act, fireEvent, waitFor } from "@testing-library/react";
import Search from "./search.js";
import { ChakraProvider } from "@chakra-ui/react";
test("Search form input", async () => {
act(() => {
const setup = () => {
const utils = render(
<ChakraProvider>
<Search />
</ChakraProvider>
);
const searchTermsInput = utils.getByLabelText("search terms input");
return {
searchTermsInput,
...utils,
};
};
const { searchTermsInput } = setup();
fireEvent.change(searchTermsInput, { target: { value: "23" } });
});
expect(screen.getByLabelText("search terms input").value).toBe("23");
// This removes a code not wrapped in act warning triggered by other state events
// namely setQuery which is called after adding search term inputs
await waitFor(() => screen.queryByText(/Find results/))});