6. React TDD 기본

 테스트 주도 개발(TDD)란 무엇인가? 

1. Test Driven Development 란 ?

-> 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성.

-> 그 후에, 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성.

 

2. TDD 를 하면 좋은 점

1. TDD 를 함으로써, 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다.
2. 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분.  즉, TDD 를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다.
3. 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높다.

 React Testing Library 란? 

: 에어비앤비에서 만든 Enzyme 을 대처하는 솔루션

=> 리액트 컴포넌트를 테스트하는 가벼운 솔루션

 

React 구성 요소 작업을 위한 API 를 추가하여 DOM Testing Library 위에 구축된다.

#DOM Testing Library 란?

: Dom 노드를 테스트하기 위한 매우 가벼운 솔루션

 

Create React App으로 생성된 프로젝트는 즉시 React Testing Library 를 지원한다.

그렇지 않은 경우 npm 을 통해 추가 가능하다.

npm install --save-dev @testing-library/react

 

Enzyme 는 구성 요소의 구현 세부 정보를 테스트한다.

=> 구현 주도 테스트

React Testing Library 는 개발자를 React 애플리케이션의 사용자 입장에 둔다.

=> 행위 주도 테스트

 

예를 들어보자면,

<p>
hello, world!
</p>

구현 주도 테스트에서는 <p> 태그가 쓰였고, hello 등의 문자가 들어갔다는 것을 테스트한다.

-> 만약 <p> 태그를 <h2> 태그로 바꾸면 에러가 날 것이다.

하지만 행동 주도 테스트에서는 사용자 입장에서 테스트한다.

-> 어떤 태그가 쓰였는지 보다는, 어떠한 이벤트를 발생시켰을 때 화면이 어떻게 변화가 되는지 같은 테스트가 더 주를 이루게 된다.

 

 Jest 란? 

: FaceBook 에 의해서 만들어진 테스팅 프레임 워크.

-> 최소한의 설정으로 동작하며 Test Case 를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인.

-> 단위 (Unit) 테스트를 위해서 이용한다.

 

1. Jest 시작하기

1. Jest 라이브러리 설치
2. Test 스크립트 변경
3. 테스트 작성할 폴더 및 파일 기본 구조 생성

=> Create React App으로 생성된 프로젝트는 Jest 를 지원한다. 

 

Jest 파일 구조 및 사용법

-> describe 안에 test (it) 케이스가 하나씩 들어있다.

 

describe : 여러 관련 테스트를 그룹화하는 블록을 만든다.

test (it) : 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명한다.

 

 

expect : 값을 테스트할 때마다 사용된다. 혼자서는 거의 사용되지 않으며, matcher와 함께 사용된다.

matcher : 다른 방법으로 값을 테스트 하도록 사용한다.

 

예시

-> 2 + 2가 5가 아니다.

=> pass

 

-> 2 + 2가 4다.

=> pass

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 React Testing Library 주요 API 

1. 앱을 키고 기본 테스트 진행

-> npm test

-> a : 모든 테스트 진행

-> q : 테스트 종료 

-> 기본 테스트가 진행되는 곳 : 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();
});

render 함수

: DOM에 컴포넌트를 렌더링하는 함수

-> 인자로 렌더링할 REact 컴포넌트가 들어감

-> Return은 RTL에서 제공하는 쿼리 함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴

=> 소스 코드가 복잡해지면 비추. 대신 screen 객체 사용하기 !

 

 쿼리 함수에 대해서 

: 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법.

-> 여러 유형의 쿼리("get", "find", "query")가 있다.

-> 차이점 : 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지.

-> 선택하는 페이지 콘텐츠에 따라 다른 쿼리가 다소 적절할 수 있다.

 

"getBy..."

: 쿼리에 대해 일치하는 노드를 반환. 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 설명 오류를 발생시킨다.

(둘 이상의 요소가 예상되는 경우 getAllby 사용)

 

"queryBy..."

: 쿼리에 대해 일치하는 노드를 반환. 일치하는 요소가 없으면 null을 반환. 둘 이상의 일치가 발견되면 오류 발생

(확인된 경우 queryAllby 사용)

 

"findBy..."

: 쿼리에 대해 일치하는 요소가 발견되면 Promise를 반환. 요소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 거부된다.

(둘 이상의 요소를 찾아야 하는 경우 findAllby 사용)

 

"waitFor"

: 일정 기간 동안 기다려야 할 때 처리될 때까지 기다릴 수 있다.

 

 

 Crate react app으로 리액트 설치 및 Prettier 설정하기 

테스팅할 때 matcher를 알맞게 쓰는지 확신이 들지 않을 때, 코드의 형식이나 JS 문법 등을 올바르게 쓰지 못할 때가 있다.

-> 그런 부분을 도와주는 모듈 : ESLint, Prettier

 

Prettier 설치

• npm 으로 설치 : 여러 개발자와 같은 포맷 유지에 더 좋음
• VSCODE 익스텐션으로 설치 : 혼자 편하게 설치해서 사용하기 좋음

 

 EsLint 설치 및 설정하기 

-> 이미 Create React App으로 리액트를 설치할 때 기본 eslint 가 설정되어 있다.

-> 하지만 이 상태로는 VS Code 에서 바로 에러를 확인 할 수 없고, 앱을 시작했을 때 터미널 상에서 봐야한다.

=> eslint 설정 파일 생성. 

 

1. eslint 설정 파일

-> package.json 에 eslintConfig 부분 지우고  .eslintrc.json 파일 생성

{
    "extends": [
      "react-app",
      "react-app/jest"
    ]
}

=> PROBLEMS 탭에서  eslint 에서 주는 기본적인 경고 확인 가능.

 

2. Testing 을 도와주는 ESLint 설치

-> ESLint Testing Plugins 설치 

#Plugins 란?

: eslint 에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다.

예를 들어, react에 관련된 린트설정을 위해서는 eslint-plugin-react를 사용하면 되며 react hooks에 관련된 규칙을 적용시켜주려면 eslint-plugin-react-hooks를 사용하면 된다.

-> npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev

#testing-library : render로 Dom 그리는 부분

jest-dom : expect-matcher로 테스트

-> 내부 설정해주기