이전에 해결하지 못한 문제였지만, 복습을 하면서 해결했습니다.혹시 저와 같은 오류를 겪으신 분들께 도움이 될까 싶어 해결 방법을 남겨봅니다.toHaveTextContent의 오류라 생각한 문제는 사실 userEvent가 제대로 작동하지 않아 발생한 문제였습니다.공식문서에 보면, <code>userEvent.setup()</code>을 호출해 사용하는 방법을 추천하고 있습니다. 저는 이렇게 불러옴으로 문제를 해결했습니다.<blockquote>We recommend invoking <code>userEvent.setup()</code> before the component is rendered.<a target="_blank" rel="noopener noreferrer nofollow" href="https://testing-library.com/docs/user-event/intro/">https://testing-library.com/docs/user-event/intro/</a></blockquote><pre class="hljs"><code class="language-jsx">//package.json 
"@testing-library/user-event": "^14.4.3"</code></pre><pre class="hljs"><code class="language-jsx">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(<Type orderType="products" />, { 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");
});</code></pre>

sos

Posts