Vuex 测试

我们主要针对Vuex中的mutaions 和actions进行单元测试。

测试 Mutations

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

const state = { ... }
//取个变量名并输出mutations
export const mutations = { ... }
export default new Vuex.Store({
 state,
 mutations
})

以下为使用 Mocha + chai 测试 mutation 的例子（实际上你可以用任何你喜欢测试框架）

// mutations.js
export const mutations = {
 increment: state => state.count++
}

// mutations.spec.js
import { expect } from 'chai'
import { mutations } from './store'
// 解构赋值mutations（destructure assign mutations）
const { increment } = mutations
describe('mutations', () => {
 it('INCREMENT', () => {
   // mock state
   const state = { count: 0 }
   // apply mutation
   increment(state)
   // assert result
   expect(state.count).to.equal(1)
 })
})

测试 Actions

Actions 可能会更加棘手一些，因为他们可能要求请求外部API.

当测试actions时，我们通常需要增加mocking服务层——例如，我们可以把API调用抽象成服务，然后我们在测试中模拟这种服务。为了便于解决mock的依赖关系，可以用 Webpack 和 inject-loader 打包测试文件。

异步action测试示例：

// actions.js
import shop from '../api/shop'
export const getAllProducts = ({ dispatch }) => {
 dispatch('REQUEST_PRODUCTS')
 shop.getProducts(products => {
   dispatch('RECEIVE_PRODUCTS', products)
 })
}

// actions.spec.js
// 使用 require 语法处理内联loaders
//inject-loader,返回一个模块工厂
//让我们能够注入mocked的依赖关系。
import { expect } from 'chai'
const actionsInjector = require('inject!./actions')
//使用mocks创建模块
const actions = actionsInjector({
 '../api/shop': {
   getProducts (cb) {
     setTimeout(() => {
       cb([ /* mocked response */ ])
     }, 100)
   }
 }
})
//用指定的mutatios测试action的辅助函数
const testAction = (action, args, state, expectedMutations, done) => {
 let count = 0
 // mock 提交
 const commit = (type, payload) => {
   const mutation = expectedMutations[count]
   expect(mutation.type).to.equal(type)
   if (payload) {
     expect(mutation.payload).to.deep.equal(payload)
   }
   count++
   if (count >= expectedMutations.length) {
     done()
   }
 }
 // 用模拟的 store 和参数调用 action
 action({ commit, state }, ...args)
 // 检查是否没有 mutation 被 dispatch
 if (expectedMutations.length === 0) {
   expect(count).to.equal(0)
   done()
 }
}
describe('actions', () => {
 it('getAllProducts', done => {
   testAction(actions.getAllProducts, [], {}, [
     { type: 'REQUEST_PRODUCTS' },
     { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
   ], done)
 })
})

测试 Getters

如果你的getters方法很复杂，那么你得测试他们。测试Getter 方法和测试mutations一样非常简单！

测试getter实例：

// getters.js
export const getters = {
 filteredProducts (state, { filterCategory }) {
   return state.products.filter(product => {
     return product.category === filterCategory
   })
 }
}

// getters.spec.js
import { expect } from 'chai'
import { getters } from './getters'
describe('getters', () => {
 it('filteredProducts', () => {
   // mock 状态
   const state = {
     products: [
       { id: 1, title: 'Apple', category: 'fruit' },
       { id: 2, title: 'Orange', category: 'fruit' },
       { id: 3, title: 'Carrot', category: 'vegetable' }
     ]
   }
   // mock getter
   const filterCategory = 'fruit'
   // 从getter中取回值
   const result = getters.filteredProducts(state, { filterCategory })
   // 声明返回值
   expect(result).to.deep.equal([
     { id: 1, title: 'Apple', category: 'fruit' },
     { id: 2, title: 'Orange', category: 'fruit' }
   ])
 })
})

运行测试

如果你的 mutations 和 actions 已经正确，后面应该在适合的mocking上浏览器测试API的依赖关系。

在Node上运行

创建下面的webpack配置（加上适合.babelrc）：

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

然后:

webpack
mocha test-bundle.js

在浏览器上运行

1. 安装 mocha-loader

2. 把上述 webpack 配置中的 entry 改成 ‘mocha!babel!./test.js’

3. 用以上配置启动 webpack-dev-server

4. 访问 localhost:8080/webpack-dev-server/test-bundle.

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

详细的安装咨询见vue-loader documentation.