---

TDD in React

create-react-app으로 리액트 프로젝트 생성 시

• 자동으로 테스트 관련 라이브러리(Testing Libarary)가 설치된다.
• 이 중 @testing-library/jest-dom는 import까지 자동으로 되어있다. (setupTest.js 파일에서)
• 테스트 script도 자동으로 설정되어 있다. (npm run test)
• App.test.js(App.js의 테스트 파일)이 자동 생성되어 있다.
  (그 외 컴포넌트 테스트 시, 컴포넌트(.js) 파일과 같은 경로에 파일 이름.test.js를 만들어서 테스트 코드를 작성한다.)

• Testing Libarary와 Jest를 사용한다.
  각각 역할이 각각 다르기 때문에 테스트 시 두 가지를 모두 사용
  (컴포넌트를 불러와서 테스트 하려면 Testing Libarary의 render() 등이 필요)

package.json

자동 설치 돼있는 Testing Libarary

• @testing-library/jest-dom : Jest-dom 제공하는 custom matcher를 사용할 수 있게 해줍니다.
• @testing-library/react : 컴포넌트의 요소를 찾기 위한 query가 포함되어 있습니다.
• @testing-library/user-event : click 등 사용자 이벤트에 이용됩니다.

Jest

• JavaScript의 Testing Framework / Test Runner
• 테스트 파일을 자동으로 찾아 테스트를 실행
• 함수를 이용해 테스트가 성공인지 실패인지 판단

describe | test 또는 it | expect

• describe 함수 블록 : Test Suites (여러 개의 test/it 함수 블록을 묶어줄 때 사용)
• test/it 함수 블록 : Test(Test Case)

[자주 쓰이는 Jest의 matcher 함수]

• toEqual() : 객체가 일치하는지 검증
• toBe() : 단순 값 비교

🌈 Jest만으로 작성한 테스트 코드 예시

example.test.js

describe('간단한 테스트들', () => {
  test('2 더하기 2는 4', () => {
  	expect(2 + 2).toBe(4);
  });

  test('2 빼기 1은 1', () => {
  	expect(2 - 1).toBe(1);
  });
});

Testing Library + jest-dom

[react 테스팅 라이브러리]

render / screen / fireEvent

• screen.getBytext()
• screen.getByRole()

[jest-dom 테스팅 라이브러리(custom matcher)]

• toBeInTheDocument()

🌈 Jest + Testing Library로 작성한 테스트 코드

App.test.js

<APP> 컴포넌트에 'learn react'라는 텍스트가 렌더 되어 있는지 테스트

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() (또는 it)()

• 첫 번째 인자 : 테스트가 어떤 내용인지를 문자열로 넣는다.
• 두 번째 인자 : 테스트 내용을 함수 형태로 넣는다.

[Testing Library] render()

• 인자 : 테스트를 진행할 컴포넌트
• 인자로 주어진 컴포넌트의 JSX에 대한 가상 DOM을 만든다.

[Testing Library] screen.getByText

• render()로 가져온 컴포넌트에 인자로 넣은 텍스트(learn react)가 있는지 확인해서 변수에 할당
• i를 붙여서 대소문자 구분하지 않게 만든다. (Regular Expression)

[Jest, Testing Library] expect().toBeInTheDocument()

• toBeInTheDocument()는 jest-dom 라이브러리의 Custom matcher (setupTest.js에 import 되어있음)
• expect의 인자로 넣은 요소가 document.body에 존재하는지 체크