[Nuxt] TDD 적용기 - Nuxt3 + Jest 구성하기

ㅎㅎ 블로그에 개발 얘기를 적는 건 오랜만이라,,, 떨리네요

여러분의 따뜻한 한 마디가 또 한 명의 개발자를 살립니다

---

개요

Nuxt3 에 Jest 를 적용한 사례는 꽤나 적다. (그냥 Nuxt3 자체가 적을지도)

 

다른 사람들이 먼저 해 주기를 기다리다가,

더 이상은 현기증이 날 것 같아서 찍먹을 해 보기로 하였다.

---

들어가기 전

스펙은 대략 이렇습니다.

1. Nuxt3
2. Typescript
3. Pinia
4. Jest
5. Vue test utils

 

아래에서 해당 내용 프로젝트 구성을 볼 수 있습니다. 
https://github.com/zestlee1106/nuxt3-starter

GitHub - zestlee1106/nuxt3-starter: Nuxt3 + Typescript + Jest 맛보기 프로젝트

하지만 위 내용은 쓰잘데기 없는 패키지들도 들어가있기 때문에 그냥 포스트를 끝까지 따라오시는 게 나을 겁니다.. (조회수 큰그림 아님)

 

Nuxt3 프로젝트 생성은 아래를 따라오시면 됩니다.

https://nuxt.com/docs/getting-started/installation

Installation · Get Started with Nuxt

여기까지 오신 개발자 분들이라면 분명히 마이너한 취향일 거라... 프로젝트 생성은 이미 다 하셨을 거라고 짐작합니다

---

진짜 시작

1. 필요한 패키지 설치

yarn add -D @types/jest @vue/test-utils @vue/vue3-jest ts-jest @babel/preset-env @pinia/testing jest-environment-jsdom

• types/jest
  • 타입스크립트에서 Jest 관련 타입을 읽기 위함
• vue test utils
  • mount 등 vue 에 관련한 test API 를 사용하기 위함
• vue3-jest
  • Vue 파일을 위한 jest 트랜스포머인데 vue3 에 맞춰서 트랜스폼 해 줌
• ts-jest
  • preset 을 ts-jest 로 사용하면 import 등 commonJS 구문을 사용할 수 있음
• pinia/testing
  • pinia 를 테스트하기 위함
• jest-environment-jsdom
  • dom 을 노드 환경에서 테스트하기 위함

2. tsconfig.json 내용 추가

{
  "compilerOptions": {
    ...
    "types": ["jest"]
  }
}

위에서 설치해 준 @types/jest 를 사용하겠다고 추가한다.

3. babel.config.js 추가

module.exports = {
  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
}

• jest 에서 babel 을 지원하도록 하자
• jest 는 기본적으로 테스트 파일을 es5 로 해석하기 때문이다

4. jest.setup.js 추가

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.global.stubs.NuxtLink = VueTestUtils.RouterLinkStub

• 요것은 테스트 파일로 추가한 것인데, Nuxt 에서 기본으로 제공해 주는 component 를 stub 하는 것이다.
• setup 파일을 따로 두려고 추가해 주었다.

3. jest.config.js 추가

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
  preset: 'ts-jest',
  transform: {
    '^.+\\.(js|jsx)?$': 'babel-jest',
    '^.+\\.vue$': '@vue/vue3-jest',
  },
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons'],
  },
}

• jest setup 파일 분리 및 config 에 추가
• preset 을 ts-jest 로 설정 (commonJS 구문을 사용한다)
• js 파일을 babel-jest 를 이용하여 트렌스폼 시킨다
• vue 파일은 vue3-jest 패키지로 트랜스폼 시킨다
• test 환경은 노드이기 때문에 jsdom 으로 설정한다
• @, ~ 로 시작하는 모듈들은 루트 디렉토리서부터 시작한다 (절대경로)
• node_modules 에 있는 파일들은 무시하겠다 (외부 라이브러리는 일단 테스트 제외)

---

자 이렇게 하고 테스트 코드를 짜면 되는데,

일단... 구성하는 것이 힘들었으니

진짜 테스트 코드는 다음 포스트에서 하자

 

쉬는 것도 중요함!