렌더링 테스트는 사용자에게 어떻게 보이는지 확인하는 데 중요한 역할을 합니다. 이 블로그에서는 타입스크립트와 Jest를 사용하여 React 또는 Vue와 같은 프론트엔드 프레임워크의 렌더링 테스트를 어떻게 수행하는지 알아보겠습니다.

준비물

1. Node.js 및 npm 설치: 테스트 환경을 설정하기 위해 Node.js 및 npm이 설치되어 있어야 합니다.

2. 프론트엔드 프로젝트: 렌더링 테스트를 수행할 대상 프로젝트가 필요합니다.

3. Jest 및 관련 모듈 설치: Jest 및 관련된 라이브러리를 프로젝트에 설치해야 합니다.

설치

프로젝트 폴더에서 다음 명령을 실행하여 Jest와 필요한 모듈을 설치합니다.

npm install jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom -D

설정

다음으로 Jest 구성 파일(jest.config.js)을 프로젝트 루트에 생성하고 다음과 같이 설정합니다.

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.json',
    },
  },
  testMatch: ['<rootDir>/tests/**/*.spec.ts'],
}

위에서 testMatch 속성은 테스트 파일의 경로 및 확장자를 설정합니다. 필요에 따라 경로를 수정하여 프로젝트에 맞게 설정합니다.

렌더링 테스트 작성

이제 렌더링 테스트를 작성해보겠습니다. 다음은 React 프로젝트를 가정하여 작성된 예제입니다.

import React from 'react'
import { render, screen } from '@testing-library/react'
import MyComponent from '@/components/MyComponent'

test('MyComponent 렌더링 테스트', () => {
  render(<MyComponent />)
  expect(screen.getByText('Hello, World!')).toBeInTheDocument()
})

위의 테스트 코드는 MyComponent 컴포넌트가 ‘Hello, World!’ 텍스트를 렌더링하는지 확인합니다.

테스트 실행

마지막으로 프로젝트 루트에서 다음 명령을 실행하여 테스트를 수행합니다.

npm test

테스트가 성공하면 렌더링 테스트가 제대로 수행된 것입니다.

이제 타입스크립트와 Jest를 사용하여 프론트엔드 프로젝트의 렌더링 테스트를 수행하는 방법을 알아보았습니다. 위의 가이드를 따라 직접 프로젝트에 적용하여 효율적인 테스트 환경을 구축해보세요.