react TDD

업데이트: 2022년 09월 06일

카테고리: react

태그: Jest, TDD

TDD 란 무엇인가?

실제 코드 작성전 테스트 코드를 먼저 작성하고, 테스트 코드를 Pass 할 수 있는 실제 코드를 작성한다.

장점

TDD로 인해 많은 기능을 테스트하기에 안정감이 부여된다.
실제 개발에 많은 시간이 소요되는 부분은 디버깅이기에 TDD를 사용하면 디버깅 시간이 줄어들고 개발시간도 줄어든다.
소스코드 하나하나 신중하게 작성하기에 깨끗한 코드가 나올 확률이 높다.

React Testing Library

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

DTL은 Dom 노드를 테스트 하기위한 가벼운 솔루션이다.

Create react App으로 프로젝트를 생성하면 바로 React Testing Library를 지원한다.

npm install --save-dev @testing-library/react 로 설치

⇒ 리액트 컴포넌트를 테스트!

Enzyme

구현 주도 테스트

React Testing Library

행위 주도 테스트

ex) states를 props으로 데이터를 주고받을때

props의 흐름을 중점으로 보여준다.

어떠한 기능이 있고

기능이 제대로 작동하는지

<p>
Edit <code>src/App.js</code> and save to
reload...
</p>

<p> 태그가 쓰였고 Edit 등의 문자가 들어가있다는 것을 테스트

<p> => <h2> 시 에러가 발생

<p> 가 쓰이던 <h3> 가 쓰이던 글을 표현하는 것보다

어떠한 이벤트를 발생하였을때 화면이 어떻게 변화 되는지가 주를 이루게 된다.

JEST

테스팅 프레임 워크

최소한의 설정으로 동작하며 Test Case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인한다. 단위 테스트를 위해서 이용

설치 : npm install jest --save-dev
Test 스크립트 설정: "test":"jest" or "jest--watchAll"
테스트 작성할 폴더 및 기본 구조 생성

⇒ create react App 을 이용하면 이미 다운받아져 있다.

테스팅파일을 찾아준다.

파일이름에 .test.js / .spec.js
파일을 tests 폴더 안에 넣어준다.

파일 구조

Untitled

describe : 여러 테스트를 그룹화
it : 개별 테스트를 수행하는 곳
- expect : 값을 테스트할 때 마다 사용, matcher 와 같이 사용된다.
- matcher : 다른 방법 으로 값을 테스트 하도록 사용
  
  ⇒ 2+2 = 4다
  
  ⇒ 2+2는 5가 아니다

주요 라이브러리

npm test 를 실행하면 App.test.js 가 만들어진다.

Jest가 알아서 해당 테스트 코드를 찾아서 실행시켜준다.

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

test('renders learn react link', () => {
  render(<App />);
	// const {getByText} = render(<App />; 은 위와 동일한 코드
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

render : 돔에 컴포넌트를 랜더링한다.
테스트 코드는 App component에 learn react 라는 텍스트를 가져오고 matcher에 통과가 되는지 확인한다.
App.js에 해당 텍스트가 있으므로 pass가 된다.

쿼리 함수

앱 컴포넌트를 랜더링한다음에 getByElement를 통해 해당 객체를 가져온다.

getBy... 가 쿼리 함수로 여러 종류의 쿼리함수가 있다. ("get" ,"find", "query")

이들의 차이는 발견되지 않으면 오류 발생하는지 또는 Promise 반환후 다시 시도하는지 여부이다

Untitled

get
쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘이상이라면 오류를 발생 시킨다.
queryBY
일치하는 요소가 없으면 null을 반환, 둘이상 이라면 오류 발생
find = get + waitfor
쿼리와 일치하는 요소가 발견되면 Promise를 반환, 발견되지 않거나 제한시간 후에 둘이상의 요소가 발견되면 거부
- waitfor : 일정시간 동안 기다려야 할때 사용

prettier 설치 설정

matcher를 알맞게 쓰도록 도와주는 모듈, 에러를 잡는 것이 아니라 코드 포맷터 의 역할

익스텐션, npm 모두 설치가 가능하다.

설정에서 규칙을 설정한뒤 window키 + shift + F 를 누르면 일괄 적용이 가능하다.

ESLint 설치

개발자들이 특정한 규칙을 가지고 코드를 깔끔하게 짤수있게 도와주는 라이브러리 자바스크립트를 쓰는 가이드 라인 제시, 문법에 오류가 나면 알려주는 역할 등등 ESLint는 포맷터(formatter) 역할도 하지만 주요 기능은 문법오류 잡는 것

코드 작성에서 볼 수 가없고 터미널 상에서 에러를 확인 할 수 있다.

eslint 설정

package.json에 exslintConfig를 제거하고 .json 파일에 넣어준다.
eslint 플러그인 설치
- eslint-plugin-testing-library
- eslint-plugin-jest-dom

.eslintrc.json 에 코드를 작성

 {
 	// 설치한 프러그인
   "plugins": [
     "testing-library",
     "jest-dom"
   ],
 	// 규칙을 정해주는 부분
 	// 규칙을 바꿔주고 싶으면 rule항목을 추가한다.
   "extends": [
     "react-app",
     "react-app/jest",
     "plugin:testing-library/react",
     "plugin:jest-dom/recommend"
   ]
 }

⇒ 에러가 발생하면 빨간줄로 표시하게 된다.

 test('renders learn react link', () => {
   render(<App />);
   const lintTest = screen.getByRole('button', {
     name: 'lintTest',
   });
      
   // 버튼이 없기에 오류가 발생한다.
   expect(lintTest.textContent).toBe('lintTest');
 });

간단한 예시

테스트 코드 작성

 test('the counter starts at 0', () => {
   render(<App />);
   const counterElement = screen.getByTestId("counter");
   // 0 이 되도록 작성
   // counterElement는 전체 태그가 들어오게 된다.
   expect(counterElement).toBe(0);
 }); 
 // => fail 

테스트 코드에 맞는 실제코드 작성

 function App() {
   const [count, setCount] = useState(0);
    
   return (
     <div className="App">
       <header className="App-header">
 				// data-testid를 이용하여 테스트 코드에서 해당 데이터를 잡아 사용
         <h3 data-testid="counter">{count}</h3>
       </header>
     </div>
   );
 }

실행 및 코드 수정
- toBe 는 <h3 data-testid="counter">{count}</h3> 태그 값이 전부 들어오기 때문에 toHaveTextContent 를 사용하여 태그에 텍스트만 가져와야한다.
- fireEvent : 이벤트를 발생
- ToHaveStyle : 해당 태그의 스타일을 확인

천소희