toHaveTextContent 에서 에러가 자꾸 나는데 아무리 찾아도 잘 모르겠습니다.

이전에 해결하지 못한 문제였지만, 복습을 하면서 해결했습니다.혹시 저와 같은 오류를 겪으신 분들께 도움이 될까 싶어 해결 방법을 남겨봅니다.toHaveTextContent의 오류라 생각한 문제는 사실 userEvent가 제대로 작동하지 않아 발생한 문제였습니다.공식문서에 보면, userEvent.setup()을 호출해 사용하는 방법을 추천하고 있습니다. 저는 이렇게 불러옴으로 문제를 해결했습니다.We recommend invoking userEvent.setup() before the component is rendered.https://testing-library.com/docs/user-event/intro///package.json "@testing-library/user-event": "^14.4.3"import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { OrderContextProvider } from "../../../contexts/OrderContext"; import Type from "../Type"; test("update product's total when products change", async () => { ✅ const event = userEvent.setup(); render(, { wrapper: OrderContextProvider }); const productsTotal = screen.getByText("총 가격:", { exact: false }); expect(productsTotal).toHaveTextContent("0"); //아메리카 여행 상품 한 개 올리기 const americaInput = await screen.findByRole("spinbutton", { name: "America", }); ✅ await event.clear(americaInput); ✅ await event.type(americaInput, "1"); expect(productsTotal).toHaveTextContent("1000"); });