Vuex

测试

在 Scrimba 上尝试本课

我们想要在 Vuex 中进行单元测试的主要部分是 Mutation 和 Action。

测试 Mutation

Mutation 非常容易测试，因为它们只是完全依赖于其参数的函数。一个技巧是，如果您使用 ES2015 模块并将您的 Mutation 放入 store.js 文件中，除了默认导出之外，您还应该将 Mutation 作为命名导出导出

const state = { ... }

// export `mutations` as a named export
export const mutations = { ... }

export default createStore({
  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'

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

测试 Action

Action 可能有点棘手，因为它们可能会调用外部 API。在测试 Action 时，我们通常需要进行一定程度的模拟 - 例如，我们可以将 API 调用抽象到一个服务中，并在我们的测试中模拟该服务。为了轻松模拟依赖项，我们可以使用 webpack 和 inject-loader 来捆绑我们的测试文件。

测试异步 Action 的示例

// actions.js
import shop from '../api/shop'

export const getAllProducts = ({ commit }) => {
  commit('REQUEST_PRODUCTS')
  shop.getProducts(products => {
    commit('RECEIVE_PRODUCTS', products)
  })
}

// actions.spec.js

// use require syntax for inline loaders.
// with inject-loader, this returns a module factory
// that allows us to inject mocked dependencies.
import { expect } from 'chai'
const actionsInjector = require('inject-loader!./actions')

// create the module with our mocks
const actions = actionsInjector({
  '../api/shop': {
    getProducts (cb) {
      setTimeout(() => {
        cb([ /* mocked response */ ])
      }, 100)
    }
  }
})

// helper for testing action with expected mutations
const testAction = (action, payload, state, expectedMutations, done) => {
  let count = 0

  // mock commit
  const commit = (type, payload) => {
    const mutation = expectedMutations[count]

    try {
      expect(type).to.equal(mutation.type)
      expect(payload).to.deep.equal(mutation.payload)
    } catch (error) {
      done(error)
    }

    count++
    if (count >= expectedMutations.length) {
      done()
    }
  }

  // call the action with mocked store and arguments
  action({ commit, state }, payload)

  // check if no mutations should have been dispatched
  if (expectedMutations.length === 0) {
    expect(count).to.equal(0)
    done()
  }
}

describe('actions', () => {
  it('getAllProducts', done => {
    testAction(actions.getAllProducts, null, {}, [
      { type: 'REQUEST_PRODUCTS' },
      { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } }
    ], done)
  })
})

如果您在测试环境中可以使用间谍（例如通过 Sinon.JS），您可以使用它们代替 testAction 帮助程序

describe('actions', () => {
  it('getAllProducts', () => {
    const commit = sinon.spy()
    const state = {}

    actions.getAllProducts({ commit, state })

    expect(commit.args).to.deep.equal([
      ['REQUEST_PRODUCTS'],
      ['RECEIVE_PRODUCTS', { /* mocked response */ }]
    ])
  })
})

测试 Getter

如果您的 Getter 有复杂的计算，那么值得测试它们。Getter 也非常容易测试，原因与 Mutation 相同。

测试 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 state
    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'

    // get the result from the getter
    const result = getters.filteredProducts(state, { filterCategory })

    // assert the result
    expect(result).to.deep.equal([
      { id: 1, title: 'Apple', category: 'fruit' },
      { id: 2, title: 'Orange', category: 'fruit' }
    ])
  })
})

运行测试

如果您的 Mutation 和 Action 编写正确，那么在进行适当的模拟后，测试应该对浏览器 API 没有直接依赖关系。因此，您可以简单地使用 webpack 捆绑测试并直接在 Node 中运行它。或者，您可以使用 mocha-loader 或 Karma + karma-webpack 在真实浏览器中运行测试。

在 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

在浏览器中运行

  1. 安装 mocha-loader。
  2. 将上面的 webpack 配置中的 entry 更改为 'mocha-loader!babel-loader!./test.js'。
  3. 使用该配置启动 webpack-dev-server。
  4. 转到 localhost:8080/webpack-dev-server/test-bundle。

在浏览器中使用 Karma + karma-webpack 运行

参考 vue-loader 文档 中的设置。