测试

    我们主要想针对 Vuex 中的 mutation 和 action 进行单元测试。

    Mutation 很容易被测试，因为它们仅仅是一些完全依赖参数的函数。这里有一个小技巧，如果你在 文件中定义了 mutation，并且使用 ES2015 模块功能默认输出了 Vuex.Store 的实例，那么你仍然可以给 mutation 取个变量名然后把它输出去：

    下面是用 Mocha + Chai 测试一个 mutation 的例子（实际上你可以用任何你喜欢的测试框架）：

    1. // mutations.js
    2. export const mutations = {
    3.   increment: state => state.count++
    4. }
    1. // mutations.spec.js
    2. import { expect } from 'chai'
    3. import { mutations } from './store'
    5. // 解构 `mutations`
    6. const { increment } = mutations
    8. describe('mutations', () => {
    9.   it('INCREMENT', () => {
    10.     // 模拟状态
    11.     const state = { count: 0 }
    12.     // 应用 mutation
    13.     increment(state)
    14.     // 断言结果
    15.     expect(state.count).to.equal(1)
    16.   })
    17. })

    下面是一个测试异步 action 的例子：

    1. // actions.spec.js
    3. // 使用 require 语法处理内联 loaders。
    4. // inject-loader 返回一个允许我们注入 mock 依赖的模块工厂
    5. import { expect } from 'chai'
    6. const actionsInjector = require('inject-loader!./actions')
    8. // 使用 mocks 创建模块
    9. const actions = actionsInjector({
    10.   '../api/shop': {
    11.     getProducts (cb) {
    12.       setTimeout(() => {
    13.         cb([ /* mocked response */ ])
    14.       }, 100)
    15.     }
    16.   }
    17. })
    19. // 用指定的 mutations 测试 action 的辅助函数
    20. const testAction = (action, args, state, expectedMutations, done) => {
    22.   // 模拟提交
    23.   const commit = (type, payload) => {
    24.     const mutation = expectedMutations[count]
    26.     try {
    28.       if (payload) {
    29.         expect(mutation.payload).to.deep.equal(payload)
    30.       }
    31.     } catch (error) {
    32.       done(error)
    33.     }
    35.     count++
    36.     if (count >= expectedMutations.length) {
    37.       done()
    38.     }
    39.   }
    41.   // 用模拟的 store 和参数调用 action
    42.   action({ commit, state }, ...args)
    44.   // 检查是否没有 mutation 被 dispatch
    45.   if (expectedMutations.length === 0) {
    46.     expect(count).to.equal(0)
    47.     done()
    48.   }
    49. }
    51. describe('actions', () => {
    52.   it('getAllProducts', done => {
    53.     testAction(actions.getAllProducts, [], {}, [
    54.       { type: 'REQUEST_PRODUCTS' },
    55.       { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
    56.     ], done)
    57.   })
    58. })

    如果在测试环境下有可用的 spy (比如通过 Sinon.JS)，你可以使用它们替换辅助函数 testAction：

    1. describe('actions', () => {
    2.   it('getAllProducts', () => {
    3.     const commit = sinon.spy()
    4.     const state = {}
    6.     actions.getAllProducts({ commit, state })
    8.     expect(commit.args).to.deep.equal([
    9.       ['REQUEST_PRODUCTS'],
    10.       ['RECEIVE_PRODUCTS', { /* mocked response */ }]
    11.   })
    12. })

    如果你的 getter 包含很复杂的计算过程，很有必要测试它们。Getter 的测试与 mutation 一样直截了当。

    1. // getters.spec.js
    2. import { expect } from 'chai'
    3. import { getters } from './getters'
    5. describe('getters', () => {
    6.   it('filteredProducts', () => {
    7.     // 模拟状态
    8.     const state = {
    9.       products: [
    10.         { id: 1, title: 'Apple', category: 'fruit' },
    11.         { id: 2, title: 'Orange', category: 'fruit' },
    12.         { id: 3, title: 'Carrot', category: 'vegetable' }
    13.       ]
    14.     }
    15.     // 模拟 getter
    16.     const filterCategory = 'fruit'
    18.     // 获取 getter 的结果
    19.     const result = getters.filteredProducts(state, { filterCategory })
    21.     // 断言结果
    22.     expect(result).to.deep.equal([
    23.       { id: 1, title: 'Apple', category: 'fruit' },
    24.       { id: 2, title: 'Orange', category: 'fruit' }
    25.     ])
    26.   })
    27. })

    如果你的 mutation 和 action 编写正确，经过合理地 mocking 处理之后这些测试应该不依赖任何浏览器 API，因此你可以直接用 webpack 打包这些测试文件然后在 Node 中执行。换种方式，你也可以用 mocha-loader 或 Karma + karma-webpack在真实浏览器环境中进行测试。

    在 Node 中执行测试

    创建以下 webpack 配置（配置好 .babelrc）:

    1. // webpack.config.js
    2. module.exports = {
    3.   entry: './test.js',
    4.   output: {
    5.     path: __dirname,
    6.     filename: 'test-bundle.js'
    7.   },
    8.   module: {
    9.     loaders: [
    10.       {
    11.         test: /\.js$/,
    12.         loader: 'babel-loader',
    13.         exclude: /node_modules/
    14.       }
    15.     ]
    16.   }
    17. }

    然后：

    在浏览器中测试

    • 安装 mocha-loader。
    • 把上述 webpack 配置中的 entry 改成 'mocha-loader!babel-loader!./test.js'。
    • 访问 localhost:8080/webpack-dev-server/test-bundle。

    使用 Karma + karma-webpack 在浏览器中执行测试