Jest에서 Nuxt.js (Vue.js)의 Vuex 테스트

여러분, 프런트 엔드 테스트를 쓰고 있습니까?

Nuxt.js(Vue.js)에서 Jest를 사용해 컴포넌트의 테스트에 대해서는 정보가 여러가지 있었습니다만, Vuex의 Store의 테스트에 대해서 별로 정보가 없었으므로, 이번은 VuexStore의 테스트에 대해 정리했습니다.

"Nuxt v2 및 Firebase (CloudFirestore)로 PWA 지원 웹 앱 개발"에서 만든 응용 프로그램을 Jest에서 테스트하는 절차를 요약합니다.

테스트 준비

테스트에 필요한 도구

Jest

htps : // 기주 b. 코 m / 후세보 k / 지 st

Jest는 Facebook이 개발을 진행하는 프런트 엔드 테스트 러너입니다.
Facebook제이므로 당연히 React에 대응하고 있습니다만, 그 외 JavaScript 어플리케이션의 테스트에도 사용할 수 있어 Vue.js에서도 이용할 수 있습니다.

RSpec와 ​​같은 기법으로 테스트 코딩이 가능합니다.

Vue Test Utils

h tps : // ㅔ 에- st- 중 ls. 아 js. 오 rg / 그럼 /
Vue.js 응용 프로그램에 대한 공식 단위 테스트 라이브러리입니다.
Vue-Router, Vuex 등 Vue.js의 테스트 코딩에 필요합니다.

Babel (@babel/core)

Babel은 ES2015 이후 버전에서 설명한 JavaScript를 ECMAScript5로 변환하는 트랜스 컴파일러입니다.

babel-jest

Jest를 Babel에 대응하는 도구입니다.

babel-preset-env

환경에 따라 필요한 Babel 플러그인을 자동으로 결정하는 도구입니다.

babel-preset-vue-app

Vue 개발을위한 Babel 설정을 제공하는 도구입니다.

lodash.clonedeep

테스트 실행에 직접 필요하지는 않지만 Vuex 테스트에서 Store 객체를 복사하는 데 사용됩니다.

필요한 도구 설정

필요한 도구를 설치합니다.

> yarn add jest @vue/test-utils lodash.clonedeep babel-jest @babel/core @babel/preset-env babel-preset-vue-app lodash.clonedeep --dev

package.json에 test 명령, Jest, Babel 설정을 추가합니다.
targets->browsers 옵션으로 대상 브라우저를 지정합니다.

옵션에 대한 자세한 내용은 이 근처에 기재되어 있습니다.
htps // 바베 ljs. 이오 / 드 cs / 엔 / 바베 lp

/package.json

  "scripts": {
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers": [
              "last 2 versions"
            ]
          },
          "debug": true
        }
      ]
    ]
  },

이 상태에서 테스트를 실행해 봅니다.

> yarn run test
yarn run v1.10.1
$ jest
No tests found

아직 테스트 코드가 없으므로 오류가 발생하지만 테스트가 실행 중입니다.

테스트 코딩

Vuex 테스트

Vuex의 Store 테스트는 이 책을 참고했습니다.

Nuxt.js 초보자 가이드

GitHub에는 소스도 게시됩니다.

/spec/store/messages.spec.js

require('dotenv').config()

const Vuex = require('vuex')
const messages = require('../../store/messages')
const { createLocalVue } = require('@vue/test-utils')
const cloneDeep = require('lodash.clonedeep')

const localVue = createLocalVue()
localVue.use(Vuex)

describe('store/message.js', () => {
  let store

  beforeEach(() => {
    store = new Vuex.Store(cloneDeep(messages))
  })

  describe('actions', () => {
    test('initMessagesでmessagesが初期化される', async () => {
      expect(store.getters['messages'].length).toBe(0)
      await store.dispatch('initMessages')
      expect(store.getters['messages'].length).not.toBe(0)
    })
  })
})

조금 설명하면 require('dotenv').config()에서 .env 값을 읽습니다.

beforeEach에서 cloneDeep을 사용하여 messages의 Store를 복사하여 객체를 생성합니다.

  beforeEach(() => {
    store = new Vuex.Store(cloneDeep(messages))
  })

실제 테스트는 여기입니다.
Store의 initMessages 액션을 dispatch하여 messages 상태에 데이터가 설정되었는지 확인합니다.

  describe('actions', () => {
    test('initMessagesでmessagesが初期化される', async () => {
      expect(store.getters['messages'].length).toBe(0)
      await store.dispatch('initMessages')
      expect(store.getters['messages'].length).not.toBe(0)
    })
  })

테스트를 실행합니다.

 PASS  spec/store/messages.spec.js
  store/message.js
    actions
      ✓ initMessagesでmessagesが初期化される (830ms)

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

테스트가 성공했습니다!

정리 등

테스트 환경을 구축할 때 Babel 오류로 고생했습니다. .

this.setDynamic is not a function

라든지,

Cannot find module '@babel/preset-env' 

라든지.

Babel 버전에주의하면서 GitHub issue 정보 및 Babel 공식 문서 당 여러 가지 정보가 있으므로 참고하십시오!

이번 기사에서는 쓰지 않았습니다만, 컴퍼넌트 주위의 테스트를 하려고 하면, 역시 컴퍼넌트가 테스트하기 쉬운 IO의 단위로 정리되어 있지 않으면 괴롭습니다・・테스트 어떻게 쓰면 좋을까? 됩니다.

역시 TDD로 테스트를 먼저 쓰는 것이 중요하네요.