userEvent.type is not working

테스트 코드를 작성하는데 userEvent.type이 잘 작동되지 않는 문제를 마주했다.
(처음엔 toHaveTextContent 부분에서 에러가 나길래 이게 문젠줄 알았다. 확인해보니 userEvent 자체가 제대로 작동이 안된거다.그러니 당연 toHaveTextContent도 당연 안된것임.)

공식문서에 보면, 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(<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");
});