[Jest] React Testing Library Jest란? Jest Start

React Testing Library

• React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축된다.
• Dom Testing Libarary : Dom 노드를 테스트하기 위한 매우 가벼운 솔루션

 

React Testing Library 설치

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

 

Jest

• FaceBook에 의해서 만들어진 테스팅 프레임 워크
• 최소한의 설정으로 동작한다.
• Test Case를 만들어 애플리케이션 코드가 잘 돌아가는지 확인한다.

 

Jest 설치

// Jest 설치
npm install jest	

// Jest 테스트에 유용한 Extentions설치
npm install eslint-plugin-testing-library eslint-plugin-jest-dom

 

.eslintrc.json 설정

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

 

Jest에서 Test 파일 찾는 법

• {filename}.test.js
• {filename}.spec.js
• 파일명 : tests

 

Jest Example

• describe
  • 여러 관련 테스트를 그룹화하는 블록을 만든다.
• it
  • 개별  테스트를 수행하는 곳
  • expect
    • 값을 테스트할 때마다 사용한다.
    • 혼자서는 거의 사용되지 않고 matcher와 함께 사용된다.
  • matcher
    • 다른 방법으로 값을 테스트하도록 사용한다.

참고 : https://github.com/testing-library/jest-dom

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();
});

 

Jest Test 명령어

npm test