[TIL] 22.12.19 - 테스트 코드 (Jest, snapshot, mocking)

테스트 코드

기능 구현시 테스트 코드는 필수이다.

테스트 코드는 마우스로 클릭을 통해 api를 요청하는 작업같은 것들을 대신해주는 코드이다.

업데이트 배포와 테스트 코드의 이해

버전 업데이트 시, 이전 버전에서 테스트하던 페이지에 문제가 발생할 수 있다. (현재 기능들과 연관된 페이지들)

이전 버전의 버튼들을 다시 테스트 해봐야 하는데, 그 과정이 번거로우므로 테스트 코드로 버튼을 눌러주는 함수를 만들어 테스트 할 수 있다.

기능을 하나하나 만들때마다 husky로 테스트 코드 만들어 체크한다.

테스트코드를 사용하면 버그잡는 과정을 수월하게 할 수 있다. 서비스의 사이즈가 커질수록 테스트 코드의 유용함이 커지며, 버그 수정의 과정이 편리해진다.

• 테스트 코드를 만들지 않는 경우 : 외주 SI
• 자체 서비스의 회사의 경우 업데이트를 해야하므로 테스트 코드 필수

다양한 테스트 방법

• 단위테스트 : 버튼 클릭과 같은 개별 기능. 보통 jest 프레임워크를 사용한다.
• 통합테스트 : 여러 기능을 한꺼번에 테스트한다. jest 프레임워크를 사용한다.
• E2E테스트 (시나리오 테스트) : 접속해서 로그인하고 결제를 하는 등 시나리오가 있는 테스트. End to End 처음부터 끝까지 테스트함. 가상의 브라우저를 띄워 테스트를 진행한다.

Jest

Jest는 테스트 전용 프레임워크이다.

jest 설치
yarn add --dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

테스트 코드 파일명
intex.test.ts / tsx (컴포넌트를 import할 경우 tsx 사용)
index.spec.ts / tsx

jest.config.js 파일 생성

jest.config.js 파일을 만들어 위의 내용을 작성해준다.

jest와 esLint 함께 사용하기

jest를 eslint를 함께 사용하기위해서 .eslintrc.js 파일로 들어가 아래 내용으로 바꾸어준다.

plugins: ["react","jest/globals"],

package.json에 jest를 실행시키기 위한 명령어 추가

package.json 파일 scripts 부분에 "test":"jest"를 추가해준다.

"scripts": {
    "test": "jest",
		"test:watch": "jest --watch"
  }

test:watch는 소스코드를 고칠때마다 jest가 실행되길 원하면 추가해준다.

만일 추가하지 않으면 원할때마다 yarn test 를 입력해서 jest를 실행해주어야 한다.

테스트 코드 작성

테스트할 함수 페이지

테스트 코드 파일은 보통 __test__ 폴더를 만들어 그 안에 넣어준다.

React에서는 34-01-jest폴더에 test 폴더를 생성해 index.test.ts 파일을 만들어줘야 하지만, Next에서는 test 폴더를 34-01-jest폴더에 넣지않고 pages 바깥에 위치시킨다. (Next에서 pages안의 폴더는 페이지가 되기 때문)

pages 폴더 바깥쪽에 test 폴더를 생성하고, 해당폴더 안쪽에 34-01-jest폴더를 넣어준다.

그리고 만일 index.ts 파일의 확장자가 tsx면 index.test.ts파일의 확장자 또한 tsx가 되어야 한다.(두 파일의 확장자는 일치해야 한다.)

it("테스트명", 함수)
expect ~ toBe

여러개일 경우 describe를 사용한다.

TDD 방식 : 테스트 코드를 먼저 만들고 테스트에 통과하는 기능을 구현하는 방식

import { render, screen } from "@testing-library/react"

render 를 사용해서 가짜로 화면이 그려질 수 있도록 한다.

컴포넌트가 render될 때, 렌더링된 결과가 screen에 들어오고 검증된다.

렌더링 된 결과는 가짜돔인 jest-dom에 그려준다.

package.json 에서 버전 수정
yarn test 로 실행 시 에러가 발생할 경우, package.json에서 @testing-library/react 의 버전을 확인해야 한다.
@testing-library/react: "^12.1.2" 버전으로 재설치 해준다.

snapshot-test

위의 방식은 테스트 코드를 일일히 하나씩 모두 적어줘야 하기때문에 컴포넌트에서 확인할게 많아질수록 번거로워 진다.

이러한 번거로움을 snapShot-test를 통해 해결할 수 있다.

• result.container에는 지금 그린 그림이 담겨있다.

• toMattchSnapshot() 기존에 찍은 사진이 있으면 기존 사진과 현재를 비교하고, 없으면 사진을 새로 찍어준다.

• yarn test -u : 사진 업데이트

container 내부의 api요청 테스트 코드 작성하기

api요청이 제대로 수행되는지 확인하기 위해서 테스트 코드를 작성하는데, 주의할 점은 실제 백엔드로 요청을 하는것이 아니라는 점이다.

만일 백엔드로 요청을 보내게 되면, 테스트시에 200-300개 정도의 요청을 보내게 될 수 있기 때문에
서버에 부하가 가서 좋지 못한 방법이다.

mocking을 이용해 요청과 응답을 가짜로 생성해준다. 백엔드 없이 프론트에서만 테스트를 하는 방법이다.

나만의 가짜 백엔드 API를 만들어 사용 (mocking) 해주는 것이 좋다.

mocking으로 테스트 코드 만들기

mocking은 결국 api를 가짜로 만들어야 하기때문에 각각 라이브러리마다 제공해주는 기능이 있다.

• axios : axios-mock-adapter

• apollo-client : apollo-mock-provider

현재 apollo-client를 사용하고 있으므로 apollo-mock-provider 를 사용해준다.

테스트하려는 페이지에서 input, button태그에 role을 추가해준다.

test 폴더 안에 새로운 폴더를 생성해서, index.test.tsx 파일을 만들어준다.

jest에서 페이지 이동 확인을 위해 router.push함수를 만든다.

가짜 push를 가짜 useRouter안에 넣어준다.

mocks로 가짜 test API를 만들어서 submit-button을 클릭했을때 가짜 API 요청한다.

request와 response (result)를 작성해준다.

// TDD => 테스트 먼저 만들기!!!
fireEvent.change(screen.getByRole("input-password"), {
	target: { value: "1234" },
});

• fireEvent.change(screen.getByRole("input-writer"), { target: { value: "철수"} })
  실제 input 값에 접근해서 입력해주는 역할

• MockedProvider : API를 가짜로 요청

• screen에서 input을 선택해서 target - value 확인

해당 컴포넌트 내의 API를 기다리려면 바깥에서도 기다려야 한다.
또한, 브라우저가 아니라 주소가 없다.
await를 기다리지 않기 때문에 waitFor로 안에있는 expect를 기다리게 해준다.