[TIL] 엘리스 SW 엔지니어 트랙 Day 061

📖 오늘 배운 내용 - 2022.01.15

• React 테스팅
• jest
• react-testing-library

 

📝 React 테스팅

[React] React 테스팅

 

📝 jest

[jest] jest란?

 

📝 Assertion Matchers 활용

[Jest] Assertion Matchers 활용

 

📝 Async assertion

[Jest] Async assertion

 

📝 react-testing-library

[react-testing-library] react-testing-library란?

 

📝 쿼리의 우선순위

[react-testing-library] 쿼리의 우선순위

 

📝 유저 이벤트

[react-testing-library] 유저 이벤트

 

📝 예제

🛠 App.js

import React, { useState } from "react";

function SimpleToggle() {
  const [show, setShow] = useState(false)

  const handleClick = () => setShow(b => !b)

  return (
    <div>
      {!show && <div>유저 정보를 보려면 버튼을 누르세요.</div>}
      {show && (
        <ul>
          <li>Email - test@test.com</li>
          <li>Address - 서울시 </li>
        </ul>
      )}
      <button onClick={handleClick}>
       {!show ? "유저정보 보기 " : "유저정보 가리기"}
      </button>
    </div>

  )
}

export default SimpleToggle;

 

🛠 App.test.js

import { screen, render } from "@testing-library/react";
import userEvent from '@testing-library/user-event';
import SimpleToggle from "./App";

describe("앱을 렌더링합니다.", () => {
  test("버튼이 있습니다.", () => {
    render(<SimpleToggle />);
    const button = screen.getByRole('button', {
      name: '유저정보 보기'
    })
    expect(button).toBeInTheDocument()
  });

  test("버튼을 누르지 않았을 시, 유저 정보 안내문이 보입니다.", () => {
    render(<SimpleToggle />);
    const text = screen.getByText('유저 정보를 보려면 버튼을 누르세요.')
    expect(text).toBeInTheDocument()
  });
});

describe("토글 기능을 테스트합니다.", () => {
  test("버튼을 눌렀을 시, 유저 정보가 보입니다.", () => {
    render(<SimpleToggle />);
    const infoText = /유저 정보를 보려면 버튼을 누르세요./i

    const text = screen.getByText(infoText)
    expect(text).toBeInTheDocument()

    const button = screen.getByRole('button', {
      name: '유저정보 보기'
    })
    userEvent.click(button) // 버튼을 클릭
    expect(
      screen.queryByText(infoText)
    ).not.toBeInTheDocument() // 위에서 찾은 텍스트가 보이지 않는지 체크

    const email = screen.getByText('Email - elice@elicer.com')
    expect(email).toBeInTheDocument()

    const address = screen.getByText('Address - 서울시 강남구 테헤란로 401')
    expect(address).toBeInTheDocument()

    expect(button).toHaveTextContent('유저정보 가리기')
  });

  test("버튼을 두번 누르면, 유저 정보가 보이지 않습니다.", () => {
    render(<SimpleToggle />);

    const button = screen.getByRole('button', {
      name: '유저정보 보기'
    })

    userEvent.click(button, { clickCount: 1}) // 버튼 카운트를 명시할 수 있다. 한번만 누른 경우!
    const email = screen.getByText("Email - elice@elicer.com")
    expect(email).toBeInTheDocument()

    userEvent.click(button, { clickCount: 1})
    expect(email).not.toBeInTheDocument()
  });
});

 

📕 1 단계

• 유저 정보 보기" 버튼을 찾기
  • const button = screen.getByRole('button', { name: '유저정보 보기' })
• 버튼이 존재하는지 체크
  • expect(button).toBeInTheDocument()
• 코드 작성
• function SimpleToggle() { return ( <button>유저정보 보기</button> ) }

 

📕 2단계

• 텍스트를 찾기
  • const text = screen.getByText('유저 정보를 보려면 버튼을 누르세요.');
• 텍스트가 존재하는지 체크
  • expect(text).toBeInTheDocument()

 

📕 그 후

• userEvent.click(button)

• expect(
        screen.queryByText(infoText)
  ).not.toBeInTheDocument() // 위에서 찾은 텍스트가 보이지 않는지 체크

 

💡 오늘 깨달은 것

• 테스트 코드 뭔가 재밌다.
• 초반 생산성은 떨어질 수 있지만 견고한 코드를 작성할 수 있을 거 같다.