Vuex 테스트

Jmnote (토론 | 기여)님의 2020년 9월 28일 (월) 17:32 판 (→‎Node에서 실행)

1 개요

Vuex Testing
Vuex 테스트, Vuex 테스팅
  • Vuex에서 단위 테스트를 하고자 하는 주요 부분은 변이와 액션이다.

2 변이 테스트

  • 변이 테스트는 매우 간단하다.
  • 왜냐하면 변이는 전달인자에 완전히 의존하는 함수이기 때문이다.
  • 한 가지 트릭은 ES2015 모듈을 사용하면서 변이를 store.js 파일에 넣으면, 기본 export와 함께 변이를 지명 export로 내보낼 수 있다는 것이다.
const state = { ... }

// 변이를 지명 export로 내보낸다.
export const mutations = { ... }

export default new Vuex.Store({
  state,
  mutations
})

Mocha + Chai를 사용하여 변이를 테스트하는 예시 (원하는 프레임워크/assertion 라이브러리를 사용할 수 있다.)

// mutations.js
export const mutations = {
  increment: state => state.count++
}
// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'

// 변이(mutations) 해체 할당
const { increment } = mutations

describe('mutations', () => {
  it('INCREMENT', () => {
    // mock state
    const state = { count: 0 }
    // 변이 적용
    increment(state)
    // 결과 확인
    expect(state.count).to.equal(1)
  })
})

3 액션 테스트

4 게터 테스트

5 테스트 실행

5.1 Node에서 실행

다음과 같이 webpack 설정을 작성한다 ( 적절한 .babelrc 필요 )

// webpack.config.js
module.exports = {
  entry: './test.js',
  output: {
    path: __dirname,
    filename: 'test-bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

그런 다음:

webpack
mocha test-bundle.js

5.2 브라우저에서 실행

  1. mocha-loader 설치
  2. 위의 webpack 설정에서 entry'mocha!babel!./test.js'로 변경
  3. 설정을 적용하여 webpack-dev-server 실행
  4. localhost:8080/webpack-dev-server/test-bundle로 이동

5.3 Karma + karma-webpack으로 브라우저에서 실행

6 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}