[React] 테스팅

React: 자동화 테스트의 종류

기본적으로 수동으로 테스트하며, 이후에 자동화 테스트를 진행한다.

1. 단위 테스트(Unit Tests)

  - 앱의 가장 작은 가능한 단위(앱 내 개별 함수들)를 위해 테스트를 짜는 것

  - 한 프로젝트에는 많은 개수의 단위 테스트가 포함됨

  - 가장 공통적이며 중요한 테스트

2. 통합 테스트(Integration Tests)

  - 다수의 구성 요소 조합을 테스트함(다수의 컴포넌트가 함께 작동할 때)

  - 단위 테스트보다 수가 적음

3. 종단 간 테스트(End-to-End Tests: E2E Tests)

  - 앱을 하나의 완전체로 보고 테스트 하는 것

중요한 질문: 무엇을 테스트 할 것인가?, 어떻게 테스트 할 것인가? -> 테스트 코드에 어떤 종류의 코드를 넣을 것인가?

테스트또한 코드이며 이 코드가 다른 코드들을 테스트한다.

1) 테스트 코드를 실행하고

2) 결과를 assert할 때는 보통 Jest를 사용한다.

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

위 테스팅 코드는, learn react라는 글자를 linkElement로 변수화한 다음 이것이 컴포넌트 내에 있는지 여부를 확인하는 간단한 코드이다. npm test로 간단하게 테스팅 섹션에 진입하며, a키를 누르면 모든 테스팅을 진행한다

a키를 눌러 모든 테스트를 진행하면, 문제가 없을 경우 아래와 같이 뜬다.

여기서는 App.js에 learn react라는 글자가 있었으므로 잘 통과했다. learn react를 다른 아무 글자로든 바꿔주고 다시 실행하면 아래와 같이 에러가 발생하여 테스트를 통과하지 못했음을 확인할 수 있다.

두 번째 사진을 보면 test.js의 어느 코드에서 문제가 생겼는지(즉 테스팅을 실패했는지)를 알 수 있다.

아주 기초중에 기초다.

 

단위별 테스트는 즉 컴포넌트 별로 테스팅을 하는 것인데, 컴포넌트이름.test.js의 형태로 컴포넌트와 최대한 가깝게 파일을 만들어서 위치시킨다.

 

1) Arrange: 테스트 데이터, 테스트 조건 및 환경을 셋업한다.

2) Act: 함수 실행 등의, 테스트되어야 할 로직을 실행한다.

3) Assert: 실행이 예상된 결과와 같은지 확인한다.

 

이 순서대로 아주 간단한 컴포넌트와 그 테스트 파일을 작성해보겠다.

1. src/components/Greeting.js

const Greeting = () => {
  return (
    <div>
      <h2>Hello World!</h2>
      <p>만나서 반가워요!!</p>
    </div>
  );
};

export default Greeting;

따로 설명할 건 없다.

2. src/components/Greeting.test.js

import { render, screen } from "@testing-library/react";
import Greeting from "./Greeting";

// 1 suite with 1 test.
describe("Greeting Component", () => {
  test("Hello World라는 텍스트가 있는지 검사해볼게요", () => {
    // 1. Arrange
    render(<Greeting />);

    // 2. Act
    // ... nothing

    // 3. Assert
    const helloWorldElement = screen.getByText("Hello World", {
      exact: false /* 완벽하게 똑같은지 여부 검사, 디폴트 값이 true임 */,
    });
    expect(helloWorldElement).toBeInTheDocument();
  });
});

describe를 통해 한 test에 대해 명명하여 suite로 나눌 수 있다. 명명할 이름과 뒤에 들어갈 함수 내에 테스팅 코드를 작성해주면 된다. 

render()를 통해 대상이 되는 컴포넌트를 가져오며, Assert에서는 확인하고자 하는 코드를 작성했다. 코드 다음에 들어가는 exact에 대해 보자면, 정확히 'Hello World'인지를 찾는다. 융통성이 없고 매우 엄격하다. 위에 Greetings.js에서는 Hello World! 로 되어있기 때문에 World 뒤에 느낌표가 붙어서 테스팅에 실패한다. 따로 지정해 주지 않으면 기본값이 true이며, false라면 좀 더 유연하게 확인한다.

그리고 마지막으로 expect().~~~를 통해 어떤 값에 대해 어떤 것을 확인하고 싶은 지를 적으면 된다. API의 종류는 매우 많으므로 여기를 참조하기 바란다.

 

여기까지가 완전 기초이며, 조금 더 심화된 컴포넌트에 대한 테스팅을 조만간 포스팅해야겠다.