SebinLee

import { act as domAct } from "react-dom/test-utils";
import { act as testAct, create } from "react-test-renderer";
// ...
let root;
domAct(() => {
  testAct(() => {
    root = create(<App />);
  });
});
expect(root).toMatchSnapshot();

SebinLee

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

import Hello from "./hello";

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

SebinLee

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는 생략합니다.

SebinLee

import React, { useEffect } from "react";

export default function Card(props) {
  useEffect(() => {
    const timeoutID = setTimeout(() => {
      props.onSelect(null);
    }, 5000);
    return () => {
      clearTimeout(timeoutID);
    };

SebinLee

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

import Toggle from "./toggle";

let container = null;
// 가독성을 위해 beforeEach, afterEach는 생략합니다.
// 생략된 코드는 위의 Setup/Teardown 부분에 있는 예시코드와 동일합니다.
// 생략된 부분을 제대로 입력해야 이벤트가 정상적으로 작동합니다.

SebinLee

import React, { useState } from "react";

export default function Toggle(props) {
  const [state, setState] = useState(false);

  return (
    <button
      onClick={() => {
        setState(previousState => !previousState);
        props.onChange(!state);

SebinLee

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

import Contact from "./contact";
import MockedMap from "./map";

//의존성을 대체할 가짜 컴포넌트(Mock)을 작성합니다.
jest.mock("./map", () => {
  return function DummyMap(props) {

SebinLee

import React from "react";
import Map from "./map";

function Contact(props) {
  return (
    <div>
      <address>
        Contact {props.name} via{" "}
        <a data-testid="email" href={"mailto:" + props.email}>
          email

SebinLee

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

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

it("renders user data", async () => {

SebinLee

import React, { useState, useEffect } from "react";

export default function User(props) {
  const [user, setUser] = useState(null);

	//fecth를 이용하여 데이터를 호출합니다.
  async function fetchUserData(id) {
    const response = await fetch("/" + id);
    setUser(await response.json());
  }