React Testing Recipe 번역 - Timer

card.test.js

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Card from "./card";

jest.useFakeTimers();

let container = null;
// 가독성을 위해 beforeEach, afterEach는 생략합니다.
// 생략된 코드는 위의 Setup/Teardown 부분에 있는 예시코드와 동일합니다.


// 타임아웃이 된 이후, null을 반환하는지를 확인합니다.
it("should select null after timing out", () => {
  const onSelect = jest.fn();
  act(() => {
    render(<Card onSelect={onSelect} />, container);
  });

  // Jest를 이용하여 100ms를 건너뛴 것으로 간주합니다.
  act(() => {
    jest.advanceTimersByTime(100);
  });
  expect(onSelect).not.toHaveBeenCalled();

  // Jest를 이용하여 5초를 건너뛴 것으로 간주합니다.
  act(() => {
    jest.advanceTimersByTime(5000);
  });
  expect(onSelect).toHaveBeenCalledWith(null);
});


// 컨테이너에서 언마운트 된 이후에 이벤트가 실행되지 않는지를 확인합니다.
it("should cleanup on being removed", () => {
  const onSelect = jest.fn();

	// 컴포넌트가 렌더되고 100ms 이후에 이벤트가 호출되지 않았는지를 확인합니다.
  act(() => {
    render(<Card onSelect={onSelect} />, container);
  });
  act(() => {
    jest.advanceTimersByTime(100);
  });
  expect(onSelect).not.toHaveBeenCalled();

	// 컴포넌트를 언마운트하고 타임아웃이 지난 이후에 이벤트가 호출되지 않는지를 확인합니다.
  act(() => {
    render(null, container);
  });
  act(() => {
    jest.advanceTimersByTime(5000);
  });
  expect(onSelect).not.toHaveBeenCalled();
});

// 버튼이 선택을 받는 경우를 테스트합니다.
it("should accept selections", () => {
  const onSelect = jest.fn();
  act(() => {
    render(<Card onSelect={onSelect} />, container);
  });

  act(() => {
    container
      .querySelector("[data-testid='2']")
      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });

  expect(onSelect).toHaveBeenCalledWith(2);
});