React Test란?

https://ko.reactjs.org/docs/testing.html

리액트의 컴포넌트를 테스트할 수 있다. 테스트 할 수 있는 컴포넌트는 다음과 같다.

• 컴포넌트 트리 렌더링 : 간략화된 테스팅 환경 및 출력값이 확실한 경우.
• 완성된 앱에서의 테스트 : 현실적 브라우저 환경(“엔드 투 엔드” 테스트라고 알려져 있습니다.)

Trade-off

각 팀의 컨벤션과 서비스에 따라 다른 선택을 할 수도 있다!

• 반복작업 속도 vs 현실적인 개발 환경 : 몇몇 도구들은 변경사항이 생기고 결과 값이 출력되는 과정에서 매우 빠른 피드백 루프를 제공하지만 브라우저 동작을 정확히 구현하지 않습니다. 다른 도구들이 현실적 브라우저 환경에서 사용되지만 반복 작업 속도를 저하시키고 지속적 통합 서버 환경에서 더 연약합니다.
• 얼마나 다양한 방법을 통해 실제 테스트 환경의 동작을 테스트할 것인가? 컴포넌트 안에서는 ‘유닛’테스트와 ‘통합’테스트의 차이는 명확하지 않습니다. 하나의 폼을 테스팅 한다고 할 때 테스트는 또한 버튼의 안의 부분에서 이루어지나요? 또는 버튼 컴포넌트에 알맞은 테스트를 할 수 있나요? 리팩 토링된 버튼이 폼 테스트에 오류를 일으키나요?

권장하는 Test Tools

• Jest는 JavaScript 테스트 러너입니다. DOM에 접근하게 하는 jsdom을 통해서 jsdom은 단지 어떻게 브라우저가 작동하는지에 대한 대략적 개요입니다. 하지만 이는 종종 React 컴포넌트를 테스팅 하기에 충분합니다. Jest는 mocking modules과 timers 같은 파워풀한 특징과 결합되어 훌륭한 반복속도를 제공합니다. 그래서 더 많은 코드 제어를 가집니다.

• React Testing Library는 실행 디테일을 가지지 않는 React 컴포넌트를 테스트하게 하는 도구 모음입니다. 이러한 접근은 리팩 토링을 수월하게 하며 접근성에 대한 가장 좋은 연습을 가능하게 합니다. 자식 컴포넌트를 가지지 않는 컴포넌트에 대한 얕은 렌더링 방법을 제공하지 않더라도 Jest와 같은 테스트 러너는 mocking에 의해 위를 가능하게 합니다.

Jest 사용법

Jest는 페이스북이 만든 테스트 라이브러리이다. 제로설정, 스냅샷(오브젝트 저장), 테스트 코드의 분리, 단순한 API를 지원한다.

jest 시작법

// package.json
{
  "scripts": "jest --watch" 
}

describe

describe 함수는 테스트할 코드를 callback으로 받고 descrition부분에 주석을 달 수 있다. test 코드를 블록으로 묶는 역할을 하여 스코프를 공유하기도 한다.

describe('test asd.js file', callback)

it || test

it은 test의 alias이다. 둘 다 테스트 케이스를 만드는 함수이다. 과정과 결과를 첫 번째 인자에 남기고 callback 함수에 있는 코드를 테스트한다.

it('process and result', callback) 

expect matcher

expect는 예상 객체를 반환한다. matcher를 사용하지 않으면 아무것도 할 수 없다.
matcher는 예상 객체를 확인한다. toBe와같은 matcher를 쓰면 원시값을 테스트할 수 있다.

it('two plus two is four', () => {
  expect(2+2).toBe(4);
})

React-Test-Library 사용법

CRA를 하여 React 프로젝트를 다음과 같이 App.test.js파일이 만들어져 있다.

// src/app.test.js
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();
});

test함수의 callback 함수에 @testing-library/react의 render와 screen 함수가 사용되고 있다. render함수는 Dom에 컴포넌트를 렌더링한다. 따라서 컴포넌트를 인자로 받는다. 그리고 React-Test-Library에서 제공하는 쿼리 함수와 유틸리티 함수를 담고 있는 객체를 리턴한다. screen이라는 객체를 통해 쿼리 함수를 사용할 수도 있다.

쿼리 함수

쿼리 함수는 get, find, query 3종류로 나눠집니다. 테스트에 따라 적합한 쿼리 함수를 사용하는 것을 공식 홈페이지에서 권장합니다.

getBy

getBy... 함수의 인자로 들어온 값에 일치하는 노드를 반환합니다. 일치하는 요소가 없거나 둘 이상의 일치가 발생하면 오류를 발생시킵니다. getAllBy를 통해 둘 이상의 노드를 검색할 수 있습니다.

findBy

findBy... 함수의 인자로 들어온 값을 노드에서 찾으면 해결되는 promise를 반환합니다. 1000ms의 시간이 걸리거나 둘 이상의 요소가 발견되면 promise를 반환하지 않습니다. 마찬가지로 findAllBy로 둘 이상의 노드를 검색할 수 있습니다.

queryBy

queryBy... 함수의 인자로 들어온 값을 노드에서 찾으면 반환해주고 없으면 null을 반환합니다. queryBy는 존재하지 않는 요소를 찾을 때 유용합니다. 둘 이상의 일치가 발생되면 오류를 발생하고 마찬가지로 queryAllBy를 사용할 수 있습니다.

eslint setup

jest와 testing-library는 eslint 지원이 됩니다.

yarn add -D eslint-plugin-testing-library eslint-plugin-jest-dom

{
    "plugins": [
        "testing-library",
        "jest-dom"
    ],
    "extends": [
        "react-app",
        "react-app/jest",
        "plugin:testing-library/react",
        "plugin:jest-dom/recommended"
    ]
}

TDD란? Test-Driven-Development

TDD는 실제 코드를 작성하기 전에 Test코드를 먼저 작성하고 Test를 통과할 수 있는 실제 코드를 나중에 작성하는 것을 말한다.
디버깅 시간도 줄어들고, 안정적인 개발이 가능하다.