사이드 프로젝트에서 어드민 프로젝트를 시작하려하는데, 테스트 코드를 추가해보고자 합니다.

이전에 테스트 코드를 작성하지 않고, 진행하려다보니 규모가 커질 수록 코드의 유지보수가 어려워지고 예상하기 어려운 결과가 나오는 경험이 많아졌습니다.

예전엔 테스트코드를 그저 귀찮은 존재라고 생각했습니다. 그러다 직접 서비스를 운영하다보니, 이 작은 단계에서 미리미리 예방할 수 있다면 훨씬 더 비용을 절약할 수 있다는 것임을 깨닿고 이제는 본격적으로 추가해보려 합니다.

그에 앞서 테스트 코드란 무엇인지 조금 자세하게 알아보고 next 13에서 공식문서를 바탕으로 테스트를 적용해보려 합니다.

우선 공식문서에 따라 크게 두가지 정도로 테스트 툴, Cypress와 jest에 대해 먼저 알아보겠습니다.

---

Cypress

Cypress는 E2E 테스트 도구로, 사용자 시나리오를 시뮬레이션하여 웹 앱의 동작을 검증하는 데 사용됩니다.

• 실제 브라우저 환경에서 사용자 시나리오를 테스트해야 하는 경우
• 사용자 경험에 초점을 맞춘 테스트가 필요한 경우.
• 실제 브라우저에서 DOM 조작 및 상호작용을 테스트해야 하는 경우.
• E2E 테스트의 장점을 활용하여 전체적인 애플리케이션 동작을 확인하고 싶은 경우.

jest

Jest는 JavaScript 코드의 단위 테스트, 통합 테스트, 스냅샷 테스트 등을 지원하는 테스트 프레임워크로, React와 함께 많이 사용됩니다.

• 유닛 테스트 또는 통합 테스트를 작성하고자 하는 경우.
• 컴포넌트나 함수 등의 작은 단위들의 동작을 검증하려는 경우.
• 코드의 품질과 안정성을 확인하고 문제를 조기에 발견하고 싶은 경우.
• 모듈화된 테스트를 구축하여 특정 기능이 제대로 작동하는지 검증하고자 하는 경우.

---

저에게 필요한 기능은 개별 단위로 돌아가는 테스트라고 생각했습니다. 그에 따라 jest를 선택하기로 결정했습니다.

이제 jest에서 사용할 수 있는 테스트 단위에 대해 알아보도록 합시다.

단위 테스트

단위 테스트는 소프트웨어의 가장 작은 단위인 모듈 또는 함수와 같은 개별적인 부분을 테스트하는 것입니다. 이 단위들이 기대한 대로 작동하는지 검증하는 것이 목적입니다.

각각의 코드가 정확한 인풋과 아웃풋을 반환하는지 확인할 수 있습니다.

통합 테스트

통합 테스트는 여러 모듈 또는 컴포넌트들이 함께 작동하는 방식을 테스트하는 것입니다. 이는 서로 다른 부분들이 잘 조합되어 기대한 동작을 하는지 확인하는 것을 목적으로 합니다.

예를 들어, 웹 애플리케이션의 통합 테스트는 여러 개의 컴포넌트나 서비스가 제대로 상호작용하며 전체 시스템이 잘 동작하는지 검증합니다. 통합 테스트는 단위 테스트와는 달리 모듈 간의 상호작용을 테스트하므로 단위보다는 큰 범위의 동작을 검증합니다.

테스트 코드 사용 이유

그럼 테스트 코드는 왜 사용할까요? 제 생각엔 제가 이전에 프로젝트를 하면서는 해당 기능에 대한 확신 없이 해피케이스에 대한 고려만하고 만든 문제점이 있습니다.

그래서 매번 요구사항을 바꿀때나, 다시 코드를 읽어야할 때 여간 불편한게 한두개가 아니었습니다.

그러나 테스트코드를 사용하면 이런 장점이 있다고 합니다.

• 예외나 버그를 조기에 발견하고 수정 가능
• 안정성과 신뢰성을 확보
• 의존성이 낮은 코드를 만들 수 있습니다
• 코드의 문서화를 도와줌 (일종의 사용방법을 보여줄 수도)
• 유지보수에 도움을 줌...

결국 제가 가장 많이 느꼈던 건, 기존 기능을 수정할때 예외 사항이나 테스트를 진행할 수 없었다는 점입니다. 그러나 테스트 코드를 작성하면 기존 기능의 의존성을 낮추는데 도움을 준다고 하니 꼭 사용해야겠다는 생각이 들었습니다.

---

Next 13에서 사용하기

우선 아래와 같이 라이브러리를 추가해줍니다.

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

eslintrc.json을 사용중이니, 아래와 같이 추가합니다.

//eslintrc.json
{
  "env": {
    // ...
    "jest": true
  }
  // ...
}

ts.config에서 다음과 같이 setup을 추가해줍니다.

  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "src/app/_document.js",
    "src/app/_document.js",
    "jest.setup.js"
  ],

jest.config.js에서는 다음 코드를 추가해줍니다.

const nextJest = require('next/jest')

// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir: './' })

// Any custom config you want to pass to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

jest.setup.js에서 필요한 라이브러리를 Import해주면 됩니다.

import '@testing-library/jest-dom'

이제 root에 __test__ 폴더를 만들고 index.test.js 파일을 만들어줍니다.

아래와 같이 작성해줍니다.

import React from 'react'
import { render, screen } from '@testing-library/react'
import Main from '../src/app/page'

describe('Main', () => {
  it('renders the correct text', () => {
    render(<Main />)
    const heading = screen.getByText(/Main/i)
    expect(heading).toBeInTheDocument()
  })
})

package.json에도 다음과 같은 스크립트를 추가해줍니다.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch",
    "test:ci": "jest --ci"
  },

yarn test를 입력하면 정상적으로 테스트가 완료됩니다.
일단 세팅만 우선적으로 해두는 방법을 작성해봤습니다.

다음엔 직접 jest를 사용하는 방법을 업로드 해봐야겠네요.