테스팅 라이브러리 기본 개념

@testing-library/jest-dom을 설치하고 

@testing-library/react를 버전 업하길 추천 (이건 필수)

 

npm test

리액트 테스팅 라이브러리과 Jest

RTL

테스트를 위한 가상 DOM을 제공

가상 DOM이 원하는 대로 작동하는지 확인할 수 있는 도구를 제공

Jest

테스트 러너. RTL로 작성된 테스트 파일을 찾고 실행하여 테스트를 수행

cra에 포함되어 기본으로 제공 

setupTests.js 파일을 사용해 각 테스트 전에 jest-dom을 가져옴 (모든 테스트에서 jest-dom 매처를 사용할 수 있음)

Watch mode - 마지막 커밋 이후 변경된 파일과 연관된 테스트만 실행 (모든 테스트 실행도 가능)

실패 조건 - 테스트 함수 실행 시 에러 발생할 때, 단언의 예상이 틀렸을 때 (에러가 발생하지 않는 한 통과. 빈 테스트도 통과)

기본 형태

import React from '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();
});

test('뭘 테스트할 건지', () => {
	render(<생성할 가상 돔 />)
	변수/상수 = screen.매소드(접근할 요소)
	expect(변수/상수).matcher(매처의 인수)
});

render 매서드 - 인수로 제공하는 JSX에 관한 가상 DOM을 생성

screen - 렌더링된 가상 DOM에 액세스 할 수 있는 메서드들을를 담고 있는 객체

expect - 단언, 테스트 통과 여부를 결정하는 메서드. 예측에 들어맞는지 확인하기 위한 대상을 인수로 받음

matcher - 단언을 수행할 또 다른 단언

 

단언 예시

expect(element.textContent).toBe("hello") // element.textContent - 요소의 텍스트 콘텐츠
expect(elementsArray).toHaveLength(7)

 

describe문

테스트를 그룹으로 묶는 방법

describe("테스트들을 그룹으로 묶음", () => {
  test('테스트1', () => {

  });
  test('테스트2', () => {

  });
  test('테스트3', () => {

  });
})

유닛 테스트과 펑셔널 테스트

유닛 테스트

실패 원인을 찾기 쉽다.

복잡한 함수의 경우 유닛 테스트를 통해 엣지 케이스들을 관리할 수 있다.

실제 사용자가 상호작용하는 방식과 테스트 방식이 다르다. (실제 사용자가 정상적으로 상호 작용하는 데도 테스트에 실패할 수 있음)

리팩토링으로 작성 방식이 달라지면 동작이 변경되지 않아도 테스트에 실패할 수 있음

하나의 테스트에 하나의 단언문만 사용하는 것이 좋을 수 있음

 

펑셔널 테스트

테스트 결과와 사용자 상호작용의 결과가 같을 가능성이 높음 (테스트가 견고함)

기능들이 서로 연결되어 있다 보니 실패한 테스트를 디버깅하기 어려움

하나의 테스트에 여러 개의 단언문을 사용

 

.toHaveStyle()이 원하는 대로 작동하지 않을 때

cra 또는 jest를 위해 모킹된 css 모듈이 있는 경우 css 모듈이 테스트에서 무시됨.

CSS를 해석하기 위한 추가 패키지를 설치하거나 .toHaveClass를 사용해 해결할 수 있음

택1

npm i jest-transform-css
npm i jest-css-modules-transform

.toHaveClass()

 

하나의 파일에 여러 개의 테스트가 있을 때 테스트 하나만 실행시키고 싶을 경우

.only 붙임

test.only("스쿱 및 토핑 라우트를 핸들링", async() => {
.
.
.

특정 테스트를 실행시키고 싶지 않을 경우

.skip 붙임

test.skip("스쿱 및 토핑 라우트를 핸들링", async() => {
.
.
.