SebinLee

import { unmountComponentAtNode } from "react-dom";

let container = null;
beforeEach(() => {
  // 렌더 타겟으로 사용할 DOM 요소를 생성합니다.
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {

SebinLee

act(() => {
  // 컴포넌트를 렌더합니다.
});
// 평가를 수행합니다.

SebinLee

import React from "react";

export default function Hello(props) {
  if (props.name) {
		return <h1>Hello, {props.name}!</h1>;
	}
	else {
		return <span>Hey, stranger</span>;
	}
}

SebinLee

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

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

it("renders with or without a name", () => {

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());
  }

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 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 Contact from "./contact";
import MockedMap from "./map";

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

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 Toggle from "./toggle";

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