[VUE + TYPESCRIPT] unit test - jest

VUE.JS 목록

 

jest 글로벌 설치

$ npm install -g jest

 

jest 주입

$ npm i -D @types/jest
$ npm i -D @vue/cli-plugin-unit-jest
$ npm i -D @vue/test-utils@1
$ npm i -D @vue/vue2-jest
$ npm i -D babel-jest
$ npm i -D jest
$ npm i -D ts-jest

 

package.json

{
  ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit"
  },
  ...
}

 

tscofig.json 

types에 jest를 추가한다.

{
  "compilerOptions": {
    ...
    "types": [
      "webpack-env",
      "jest"
    ],
    ...
  },
  ...
}

 

jest.config.js

파일을 생성한다.

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript'
}

 

 

/src/tests/unit/test.spec.ts

테스트.spec 파일을 만든다.

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('테스트 묶음', () => {
  it('테스트 성공', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

 

테스트 구동

$ npm run test


PASS  src/tests/unit/test.spec.ts
  테스트 묶음
    √ 테스트 성공 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.96 s
Ran all test suites.

 

 

 

VUE.JS 목록