counter.test.js

// Counter.test.js
import ReactDOM, { unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import Counter from "./Counter";

let container = null;
beforeEach(() => {
  // 렌더링 컨테이너로 활용하기 위한 DOM element 를 생성합니다
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // 각 테스트를 수행한 뒤 마운트된 컨테이너를 클린업 합니다
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("Counter 컴포넌트를 렌더링합니다", () => {
  act(() => {
    ReactDOM.render(<Counter />, container);
  });

  // 제대로 렌더링 되었다면 카운터 값과 버튼이 화면에 나타나야 합니다.
  expect(container.querySelector("h1").textContent).toBe("Counter: 0");
  expect(container.querySelector("[data-testid=inc]").textContent).toBe("+");
  expect(container.querySelector("[data-testid=dec]").textContent).toBe("-");
});