Nuxt.js에 Jest설치하기

Vue.js 프로젝트는 보통 vue-cli 를 이용해 스캐폴딩합니다. Nuxt는 nuxt-community 조직을 통해 starter-template, typescript-template 또는 express-template을 제공하는데 대부분의 템플릿은 이미 조합된 템플릿으로만 사용할 수 있고, UI 프레임워크를 추가로 설치해야하는 불편함이 있습니다.

이 글은 create-nuxt-app을 이용해 Nuxt.js 프로젝트를 만듭니다. vue-cli처럼 필요한 내용들을 선택하여 프로젝트를 스캐폴딩하는 과정을 살펴봅니다. 추가로 테스트러너인 Jest와 Vue를 위한 테스팅 라이브러리 vue-test-utils를 설치하는 과정을 다룹니다.

Nuxt.js 설치

npx을 사용하는 경우

npx create-nuxt-app <my-project>

yarn을 사용하는 경우

yarn create nuxt-app <my-project>

순서대로 필요한 라이브러리를 선택하시면 됩니다. 선택할 라이브러리 목록은 아래와 같습니다.

서버사이드 프레임워크

• None (Nuxt default server)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Adonis (WIP)

UI 프레임워크

• None (feel free to add one later)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Buefy

HTTP 통신을 위한 axios 사용 여부

코드 린트를 위한 EsLint 사용 여부

Nuxt프로젝트 설정이 끝났습니다. 이제 테스트 도구를 설치합니다.

의존성 설치

npm의 경우

npm install --save-dev babel-jest jest jest-vue-preprocessor @vue/test-utils

yarn을 사용하는 경우

yarn add babel-jest jest jest-vue-preprocessor @vue/test-utils --dev

package.json에 아래 내용을 추가합니다.

// ...
  "jest": {
    "verbose": true,
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    },
    "moduleNameMapper": {
      "^vue$": "vue/dist/vue.common.js",
      "^~/(.*)$": "<rootDir>/$1"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/components/**/*.{js, vue}",
      "**/server/utils/*.{js}",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
      "text-summary"
    ]
  }

위 JSON 설정을 추가하고 script를 추가해 npm run test 명령어가 실행되면 자동으로 테스트 파일을 감시하도록 합니다.

"test": "jest --watchAll"

모듈 테스트

Vue 컴포넌트 테스트 전에 간단한 sum 메소드를 이용해 Jest가 잘 추가되었는지 확인합니다.

우선 <my-project>/tests/sum.test.js 파일을 만듭니다. test 스크립트가 실행중이면 자동으로 감지하여 테스트를 시작합니다.

describe('sum 메소드 테스트', () => {
  test('1 + 1 === 2 (Jest 테스트를 위함)', () => {
    expect(1+1).toBe(2)
  })
})

위 테스트를 추가하고 저장하면 테스트 결과를 볼 수 있습니다.

파일을 이용해 만든 테스트가 아니므로 utils 디렉터리를 만들고 테스트를 수정합니다. 이 글은 Jest 테스트를 자세히 다루는 글이 아니므로 바로 sum 메소드를 구현하고 테스트까지 완료합니다.

// <my-project>/utils/sum.js
const sum = (a, b) => {
  return a + b
}
module.exports = sum
// <my-project>/tests/sum.tests.js
const sum = require('../utils/sum')
describe('sum 메소드 테스트', () => {
  test('1 + 1 === 2 (Jest 테스트를 위함)', () => {
    expect(sum(1,2)).toBe(3)
  })
})

Jest 설치가 정상적으로 되어있는지 확인이 완료되었으므로 vue-test-utils를 확인할 차례입니다.

Vue 컴포넌트 테스트

위 테스트에서 import , export 등의 키워드를 사용하지 않았는데, Vue 컴포넌트 테스트를 위해선 .babelrc 파일을 프로젝트 루트에 추가해야합니다.

{
  "presets": [
    "env"
  ]
}

이제 Jest 테스트에서 import와 export를 사용할 수 있게 되었습니다. sum 메소드에는 직접 적용해보세요

Nuxt.js 프로젝트를 스캐폴딩하면 기본으로 제공하는 Logo.vue 컴포넌트를 테스트하겠습니다.

테스트할 내용은 Logo 컴포넌트가 Vue.js 컴포넌트인지, 그리고 4개의 Triangle 클래스를 가지는 <div> 엘리먼트가 있는가 입니다.

Logo 컴포넌트가 Vue 컴포넌트인지 테스트

주의해야할 점은 싱글파일 컴포넌트(.vue 파일)에 반드시 <script></script> 태그가 있어야합니다. script 태그가 없으면 Jest가 파일을 가져와도 테스트를 할 수 없습니다.

import { mount } from '@vue/test-utils'
import Logo from '../components/Logo.vue'
describe('로고 컴포넌트', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(Logo)
  })
  test('로고 컴포넌트는 Vue 인스턴스이다.', () => {
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

첫번째 테스트입니다. beforeEach 메소드에서 각 테스트마다 wrapper 변수에 Logo 컴포넌트를 마운트합니다.

4개의 Triangle 클래스를 가지는지 테스트

// ...
  test('4개의 Triangle 클래스를 가진다.', () => {
    expect(wrapper.findAll('.Triangle').length).toBe(4)
  })
// ...

이번에도 테스트가 성공 합니다. 실패하는 테스트를 보려면 toBe 안의 4를 다른 숫자로 바꾸어보세요.

더 알아보기

이 문서는 초기 프로젝트 설정만을 다루므로 Nuxt.js와 Jest, vue-test-utils에 관한 내용은 깊게 다루지 않았습니다. 자세한 내용은 아래 문서들을 읽어보세요

• Nuxt.js
• Jest
• Vue Test Utils