"Vuex 테스트"의 두 판 사이의 차이

55번째 줄: 55번째 줄:
===Node에서 실행===
===Node에서 실행===
===브라우저에서 실행===
===브라우저에서 실행===
# <code>mocha-loader</code>를 설치한다.
# 위의 webpack 설정에서 <code>entry</code>를 <code>'mocha!babel!./test.js'</code>로 변경한다.
# 설정을 적용하여 <code>webpack-dev-server</code>를 실행한다.
# <code>localhost:8080/webpack-dev-server/test-bundle</code>로 이동한다.
===Karma + karma-webpack으로 브라우저에서 실행===
===Karma + karma-webpack으로 브라우저에서 실행===
* [https://vue-loader.vuejs.org/guide/testing.html vue-loader 문서] 에서 설정방법을 참고하자.
* [https://vue-loader.vuejs.org/guide/testing.html vue-loader 문서] 에서 설정방법을 참고하자.

2020년 9월 28일 (월) 17:29 판

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에서 실행

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 }}