프론트엔드, 테스트해야할까?

프론트가 테스트를 해야 하나?

나는 최근까지 이런 생각을 가지고 있었다. 하지만 현재 프론트의 중요성이 점점 강조되고,
백엔드의 다양한 기능들이 프론트로 옮겨오며 프론트가 더욱 중요해지고, 프론트도 관리를 할 필요성이 생겼다.
이에 따라 프론트의 코드 퀄리티가 주목받으면서 프론트엔드 테스팅도 같이 주목받기 시작했다.

코드 관리, 코드 퀄리티랑 테스트는 뭔 상관이냐?

이는 정말 잘못된 생각입니다.
프론트엔드 테스팅은 코드가 코더의 의도한 대로 동작한다는 것을 보장해 주는 매우 중요한 장치입니다.
코드 작성 후 손으로 동작을 수동으로 확인하다 보면 99% 까먹고 확인을 안 하는 기능이 있기 마련이다.
하지만 시나리오에 맞춰 테스트를 진행한다면 이러한 불상사를 막을 수 있습니다.

하지만 역시 처음보단 유지보수에 더욱 큰 역할을 해주는 것이 바로 테스트입니다. 개발을 하다 보면 리팩토링을 하거나, 기능을 변경하기 위해 코드를 변경하는 경우가 있는데, 코드를 수정할 때 테스트가 없다면 코드 수정 시 발생할 수 있는 사이드이팩트, 즉 의도치 않은 버그나 오류를 알 수가 없습니다. 이럼 수정하지 말걸… 하면서 후회하는 거죠
그렇기 때문에 프로젝트가 클수록 테스트 코드는 필연적입니다.

프론트의 테스트는 크게 3가지로 나눌 수 있습니다. 
유닛테스트, 통합테스트, e2e테스트로 나눌수 있습니다. 이제 이러한 테스트들을 하나씩 알아가 봅시다

유닛 테스트

• 코드의 unit단위를 테스트한다 → 프론트에서 unit은 단일 컴포넌트나 단일 서비스를 뜻한다
• 프로젝트의 가장 작은 단위를 테스트한다 → 테스트의 양이 가장 적다 → 효율적이다.
• 통합이 필수적이지 않기에 백엔드 api가 구현이 안되어있어도 상관없다.

통합 테스트

• 유닛들 간의 데이터를 주고받는 환경을 테스트한다
• 전체 유닛의 상호작용에 대한 테스트 또한 가능하다

e2e(end to end) 테스트

• 끝부터 끝까지 전부 테스트를 돌린다 → 사용자부터 백엔드 인프라까지
• 프론트만이 따로 테스트하는 것은 불가능하다 → 백엔드와의 통합이 필요
• 굉장히 오래 걸려 많은 테스트가 어렵다

테스트 코드 작성 방법

테스팅 방법을 정하기 위해선 어떤 도구를 사용할지, 어떤 범위로 테스팅할지, 어떤 식으로 작성할지를 알아야 한다.
또한 프론트엔드에는 상황에 맞게 사용할수있게 많은 프론트 테스트 도구가 존재한다. 우린 여기서 가장 보편적인 2가지만 알아볼 것이다.

Jest

Jest는 개발자가 JS와 TS 코드에 대한 테스트를 실행할 수 있도록 하는 JS 테스트 프레임워크다. Jest가 없을 땐 여러 JS 테스팅 라이브러리들을 조합해서 사용했었다. 하지만 Jest는 이 라이브러리 하나만 설치하면, Test Runner, Test Mock, Test Matcher 같은 프레임워크를 제공해 주기 때문에 현재 많은 프론트 개발자들이 사용하는 라이브러리다.
즉, Jest는 하이브리드 엔진이다.

Test Runner
테스트 파일을 찾아 실행하고, 테스트의 성공/실패를 결과를 관리하는 도구

 

Test Matcher
테스트 대상의 결과가 기대한 조건과 일치하는지 판단하는 비교 규칙

 

Test Mock

실체 객체나 기능을 가짜로 대체하여 테스트 환경을 통제하는 기술이다.

api 호출은 느리고, DB 접근은 테스트마다 데이터가 다르다. 하지만 테스트는 항상 같은 결과가 나와야 한다. 그렇기 때문에 Test Mock을 사용하여 외부 의존성을 제거하는 것이다.

 

Mock의 종류로는 3가지가 있다.

1. 함수 Mock

const fn = jest.fn()
fn()
expect(fn).toHaveBeenCalled()

 

2. 모듈 Mock

jest.mock('./api', () => ({
  fetchUser: jest.fn(() => Promise.resolve({ name: 'Kim' }))
}))

 

3. api Mock

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ data: 'hello' }),
  })
)

 

React Testing Library

React Testing Library는 CRA를 통해 리액트 앱을 만들 때 기본으로 제공되는 라이브러리이다. 리액트 컴포넌트를 가상으로 랜더링하고 동작을 확인하며, 랜더링 결과를 확인할 수 있는 도구이다.

// React Testing Library 공식 예제
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import '@testing-library/jest-dom'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  // Given 
  // 컴포넌트를 랜더링
  render(<Fetch url="/greeting" />)

  // When
  // Load Greeting 글씨를 찾아서 클릭
  await userEvent.click(screen.getByText('Load Greeting'))

  // Then
  // heading에 hello there이 있는지 검증
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
})

가상의 DOM에서 ReactComponent를 html로 렌더링 하고 Text가 렌더링 되었는지, 확인할 수 있다.
Unit Test 환경, 통합테스트 환경에서 추천한다.
즉, React Testing Library는 테스트 대상 다루는 도구이다.

그렇다면 둘 중 무엇을 사용해야 할까요?
답은 둘 다 필요하다입니다.
Jest는 테스트를 찾아 실행하고, 테스트를 통과하는지 검사한다. 

React Testing Library는 React 앱을 테스트하기 위해 가상 DOM을 제공해 준다.

 

설치

npx nx g @nx/jest:configuration web

 

이 한 줄이 Jest 설정이 자동으로 생성된다.

apps/web/
 ├ jest.config.ts
 ├ tsconfig.spec.json
 └ src/
     └ test-setup.ts

 

이러한 구조를 전제로 Jest를 실행한다

 

필요한 라이브러리 설치

npm install -D \
@testing-library/react \
@testing-library/user-event \
@testing-library/jest-dom

 

Jest 자체는 Nx가 이미 의존성으로 관리한다

test-setup.ts 설정

//apps/web/src/test-setup.ts
import '@testing-library/jest-dom'

이게 없다면 `toBeInTheDocument does not exist` 에러가 발생한다

 

jest.config.ts 확인

//apps/web/jest.config.ts
export default {
  displayName: 'web',
  preset: '../../jest.preset.js',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  transform: {
    '^.+\\.(ts|tsx|js|jsx)$': [
      'babel-jest',
      { presets: ['@nx/next/babel'] },
    ],
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
}

 

`testEnvironment: 'jsdom’`가 꼭 있어야 한다. 이게 없다면 test가 실행되지 않는다.

 

tsconfig.spec.json 설정

//apps/web/tsconfig.spec.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "types": ["jest", "@testing-library/jest-dom"]
  },
  "include": [
    "**/*.spec.ts",
    "**/*.spec.tsx",
    "**/*.test.ts",
    "**/*.test.tsx"
  ]
}

 

• test is not defined
• expect 타입 에러

이러한 에러들 모두 해결된다

 

테스트 파일 위치 & 규칙

apps/web/src/
 ├ components/
 │   ├ Counter.tsx
 │   └ Fetch.tsx
 │
 ├ tests/
 │   ├ Counter.test.tsx
 │   └ Fetch.test.tsx
 │
 └ pages/ 또는 app/

이런 식으로 테스트 파일을 위치시키는 것이 가장 보편적인 방법입니다.

 

테스트 실행 방법

앱 단위 실행

npx nx test web

Watch  모드

npx nx test web --watch