개요

Nuxt.js 프로젝트에 나중에 Jest와 vue-test-utils를 넣을 기회가 있었으므로 메모 해 둡니다.

필요한 라이브러리 설치

yarn add -D @babel/plugin-transform-runtime @babel/preset-env @vue/test-utils jest vue-jest babel-core vue-jest

.babelrc 추가

프로젝트의 루트 바로 아래에 .babelrc를 추가합니다.

// .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false,
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

jest.config.js 추가

그런 다음 jest.config.js를 추가합니다.

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1'
  },
  moduleFileExtensions: ['js', 'json', 'vue']
}

package.json에 test script 추가

추가합니다.

"scripts": {
  ..
  "test": "jest --config jest.config.js"
},

이제 yarn run test에서 테스트를 실행할 수 있습니다.

테스트 추가

이 섹션에서는 userInfo 만 props에있는 UserInfoCard라는 구성 요소를 테스트합니다. 테스트는 .user-name라는 CSS 클래스에 사용자 이름이 표시되는지 테스트합니다.

// test/components/userInfoCard.spec.js
import { mount } from '@vue/test-utils'
import UserInfoCard from '~/app/components/UserInfoCard.vue'
import UserFixture from '@fixture/user'

describe('UserInfoCard', () => {
  test('Display text', () => {
    const wrapper = mount(UserInfoCard, { propsData: { userInfo: UserFixture } })
    expect(wrapper.find('.user-name').text()).toEqual('Test Name')
  })
})

테스트에서 propsData를 전달할 때의 hash key 이름은 구성요소가 수신하는 props 이름과 일치해야 합니다. 테스트 데이터는 fixture 로서 다른 파일로 정의해 주면 사용되게 편리합니다.

// test/fixtures/user.js
export default {
  id: 1,
  name: 'Test Name',
  ..
}

fixture 용 name mapper도 jest.config.js에 추가하는 것이 좋습니다.

module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    "^@fixture/(.*)$": "<rootDir>/test/fixtures/$1" // 追加
  },
  moduleFileExtensions: ['js', 'json', 'vue']
}

테스트 실행

yarn run test에서 테스트를 실행해 봅시다!
시험은 통과했는가?

끝에

테스트를 꼼꼼히 쓰는 컴포넌트와 그렇지 않은 컴포넌트를 파악한 다음 테스트를 작성해 봅시다. 그럼 좋은 테스트 생활을!