2. React Testing Library

React Testing Library

리액트 컴포넌트를 사용자 입장에 가깝게 테스트 할 수 있는 도구

• Implementation Driven Test(구현 주도 테스트) : 주로 애플리케이션이 어떻게 작동하는지에 대해 초점을 두어 테스트 작성

• Behavior Driven Test(행위 주도 테스트) : 사용자가 애플리케이션을 이용하는 관점에서 사용자의 실제 경험 위주로 테스트를 작성

• React Testing Library는 Behavior Driven Test 방법론을 따르는 테스트를 작성하는데 적합

• jsdom이라는 라이브러리를 통해 실제 브라우저 DOM을 기준으로 테스트를 작성하기 때문

• 어떤 React 컴포넌트를 사용하는지보다, 사용자 브라우저에서 렌더링하는 실제 HTML 마크업의 모습이 어떤지에 대해서 테스트하기 용이

• Enzyme이라는 테스트 라이브러리는 리액트 VDOM을 기준으로 테스트를 작성하여 Implementation Driven Test 방법론을 따름

React Testing Library 주요 API

• render() 함수 : DOM에 컴포넌트를 렌더링

• fireEvent 객체 : 특정 이벤트를 발생시킴

• 쿼리함수 : DOM에서 특정 영역을 선택

render() 함수

• @testing-library/react 모듈로부터 바로 임포트 가능

• 인자로 렌더링할 React 컴포넌트를 넘김

• React Testing Library사 제공하는 모든 쿼리함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴하므로 destructuring 문법으로 render() 함수가 리턴한 객체로부터 원하는 쿼리함수만 얻어올 수 있음

쿼리함수

• 렌더링된 DOM노드에 접근하여 엘리먼트를 가져오는 메서드

• 쿼리 타입/타겟 개수/타겟 유형으로 구성 ex) get``All``ByRole

쿼리타입

• get : 동기적으로 처리되며 타겟을 찾지못할시 에러를 던짐

• find : 비동기적으로 처리되며 타겟을 찾지 못할시 에러를 던짐

• query : 동기적으로 처리되며 타겟을 찾지 못할시 null을 반환

타겟의 개수

• 다수의 엘리먼트가 탐색되는 상황이라면 뒤에 All을 붙임

타겟 유형

• ByRole, ByLabelText, ByPlaceholderText, ByText, ByDisplayValue, ByAltText, ByTitle, ByTestId

정적 컴포넌트 테스팅

Page Not Found 컴포넌트 예제

import React from "react";

function NotFound({ path }) {
  return (
    <>
      <h2>Page Not Found</h2>
      <p>해당 페이지({path})를 찾을 수 없습니다.</p>
      <img
        alt="404"
        src="https://media.giphy.com/media/14uQ3cOFteDaU/giphy.gif"
      />
    </>
  );
}

h2가 렌더링 되고 있는지 검증

import React from "react";
import { render } from "@testing-library/react";
import NotFound from "./NotFound";

describe("<NotFound />", () => {
  it("renders header", () => {
    const { getByText } = render(<NotFound path="/abc" />);
    const header = getByText("Page Not Found");
    expect(header).toBeInTheDocument();
  });
});

1. <NotFound /> 컴포넌트를 임포트해서 render()의 인자로 넘긴 후에 리턴 객체로부터 getByText() 함수를 얻음

2. 화면에서 검색할 텍스트인 Page Not Found를 getByText()에 인자로 넘겨 <h2/> 엘리먼트를 얻음

3. jest-dom의 toBeInTheDocument() matcher 함수를 이용해서 해당 <h2/> 엘리먼트가 화면에 존재하는 검증

p가 렌더링 되고 있는지 검증

it("renders paragraph", () => {
  const { getByText } = render(<NotFound path="/abc" />);
  const paragraph = getByText(/^해당 페이지/);
  expect(paragraph).toHaveTextContent("해당 페이지(/abc)를 찾을 수 없습니다.");
});

1. 정규식으로 <p/>안의 텍스트가 포함된 요소를 가져옴

2. 가져온 요소의 텍스트가 예상과 일치하는지 검증

img가 렌더링 되고 있는지 검증

it("renders image", () => {
  const { getByAltText } = render(<NotFound path="/abc" />);
  const image = getByAltText("404");
  expect(image).toHaveAttribute(
    "src",
    "https://media.giphy.com/media/14uQ3cOFteDaU/giphy.gif"
  );
});

1. 이미지 태그는 텍스트가 없기 때문에 alt속성값을 이용

2. jest-dom의 toHaveAttribute() matcher 함수를 이용해서 <img/> 엘리먼트의 src 속성값이 정확한지 검증

동적 컴포넌트 테스팅

내부 상태에 따라 UI에 변화가 생길 수 있는 컴포넌트 테스트

import React, { useState } from "react";

function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <>
      <h2>Login</h2>
      <form onSubmit={onSubmit}>
        <label>
          이메일
          <input
            type="email"
            placeholder="[e-mail]"
            value={email}
            onChange={({ target: { value } }) => setEmail(value)}
          />
        </label>
        <label>
          비밀번호
          <input
            type="password"
            value={password}
            onChange={({ target: { value } }) => setPassword(value)}
          />
        </label>
        <button disabled={!email || !password}>로그인</button>
      </form>
    </>
  );
}

이메일과 비밀번호를 입력해야 로그인 버튼이 활성화 되는 예제

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import LoginForm from "./LoginForm";

describe("<LoginForm />", () => {
  it("enables button when both email and password are entered", () => {
    const { getByText, getByLabelText } = render(
      <LoginForm onSubmit={() => null} />
    );

    const button = getByText("로그인");
    const email = getByLabelText("이메일");
    const password = getByLabelText("비밀번호");

    expect(button).toBeDisabled();

    fireEvent.change(email, { target: { value: "[e-mail]" } });
    fireEvent.change(password, { target: { value: "Test1234" } });

    expect(button).toBeEnabled();
  });
});

1. 로그인 버튼의 경우에는 getByText() 쿼리 함수를 통해 선택하고, 이메일과 비밀번호 입력칸은 getByLabelText() 쿼리 함수로 선택

2. jest-dom의 toBeDisabled()와 toBeEnabled() matcher 함수를 통해서 로그인 버튼의 활성화 여부를 이벤트 발생 전후로 검증

3. 두 개의 입력칸에 change 이벤트를 발생시키기 위해서 fireEvent.change() 함수를 사용

로그인 버튼을 클릭했을때 prop으로 넘긴 onSubmit 함수가 호출되는지 검증

it("submits form when buttion is clicked", () => {
  const obSubmit = jest.fn();
  const { getByText, getByLabelText } = render(
    <LoginForm onSubmit={obSubmit} />
  );

  const button = getByText("로그인");
  const email = getByLabelText("이메일");
  const password = getByLabelText("비밀번호");

  fireEvent.change(email, { target: { value: "[e-mail]" } });
  fireEvent.change(password, { target: { value: "Test1234" } });

  fireEvent.click(button);

  expect(obSubmit).toHaveBeenCalledTimes(1);
});

Mocking

위의 예제에서 onSubmit에 전달할 함수를 jest.fn()을 이용해서 만들었음

mocking: 단위테스트를 작성할 때 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법

jest.fn()

jest.fn() 함수를 이용해 가짜 함수를 생성할 수 있음

일반 자바스크립트 함수와 동일한 방식으로 인자를 넘겨 호출할 수 있음

const mockFn = jest.fn();
mockFn();
mockFn(1);
mockFn("a");
mockFn([1, 2], { a: "b" });

mockReturnValue(리턴값) 함수를 이용해서 어떤 값을 리턴해야할지 정해줄 수 있음

mockFn.mockReturnValue("I am a mock!");
console.log(mockFn()); // I am a mock!

mockResolvedValue(Promise가 resolve하는 값) 함수를 이용해서 가짜 비동기 함수를 만들 수 있음

mockFn.mockResolvedValue("I will be a mock!");
mockFn().then((result) => {
  console.log(result); // I will be a mock!
});

mockImplementation(구현 코드) 함수로 재구현할 수 있음

mockFn.mockImplementation((name) => `I am ${name}!`);
console.log(mockFn("Dale")); // I am Dale!

가짜함수용 Jest Matcher인 toBeCalled*** 함수를 이용해서 가짜함수가 몇번 호출되었고 인자로 무엇이 넘어왔었는지를 검증할 수 있음

mockFn("a");
mockFn(["b", "c"]);

expect(mockFn).toBeCalledTimes(2);
expect(mockFn).toBeCalledWith("a");
expect(mockFn).toBeCalledWith(["b", "c"]);

jest.spyOn()

어떤 객체에 속한 함수의 구현을 가짜로 대체하지 않고, 해당 함수의 호출여부와 어떻게 호출되었는지만을 알아내야하는 경우

const calculator = {
  add: (a, b) => a + b,
};

const spyFn = jest.spyOn(calculator, "add");

const result = calculator.add(2, 3);

expect(spyFn).toBeCalledTimes(1);
expect(spyFn).toBeCalledWith(2, 3);
expect(result).toBe(5);

Given - When - Then

BDD

• Behavior Driven Development

• 시나리오를 기반으로 테스르 케이스를 작성하며 함수단위 테스트를 권장하지 않음

• Given - When - Then 구조를 가지는 것을 권장

Given - When - Then 패턴

• Given : 테스트 상태를 설명

• When : 구체화하고자 하는 행동

• Then : 예상되는 변화

기능 : 사용자 주식 트레이드

시나리오 : 트레이드가 마감되기 전에 사용자가 판매를 요청

"Given" 나는 MSFT 주식을 100가지고 있다.
        그리고 나는 APPL 주식을 150가지고 있다.
        그리고 시간은 트레이드가 종료되기 전이다.

"When"  나는 MSFT 주식 20을 팔도록 요청했다.

"Then"  나는 MSFT 주식 80 가지고 있어야 한다.
        그리고 나는 APPL 주식 150을 가지고 있어야 한다.
        그리고 MSFT 주식 20이 판매 요청이 실행되었어야 한다.

Test fixture

• 테스트 실행을 위해 베이스라인으로 사용되는 객체들의 고정된 상태

• 결과를 반복가능할 수 있고 고정된 환경에서 테스트할 수 있게 됨

• 중복 발생되는 행위를 고정시켜 한곳에서 관리

• jest beforeEach를 통해 해당 파일 혹은 클래스 내부의 함수들이 시작하기 전에 항상 수행할 일을 지정할 수 있음(afterEach는 각 함수 실행 후에)

• beforeAll(), afterAll()은 각각 함수의 전 후에 매번 호출되는 것이 아니라 맨 처음과 맨 끝에 딱 한 번씩만 호출됨