测试调用外部 api 的 Vuex 动作答案

【问题标题】：Testing Vuex action that calls external api测试调用外部 api 的 Vuex 动作
【发布时间】：2017-09-10 20:19:15
【问题描述】：

在我的 Vue.js 项目中，我有以下 Vuex 操作：

import { HTTP } from '@/services/http'

export const actions = {
  loginUser ({ commit }, params) {
    HTTP.post(
      'v1/login',
      { email: params.email, password: params.password }
    ).then(response => {
      localStorage.setItem('access_token', response.data.token)
      commit('SET_USER', response.data)
    }).catch(error => {
      commit('SET_LOGIN_ERROR', error.response.data.error)
    })
  }
}

我正在使用 Mocha + Karma 进行单元测试。如何测试该操作？

【问题讨论】：

在我们开始之前，为什么还要费心去做呢？如果您依赖外部 API 调用，您可能会质疑您的测试的可靠性和自包含性。从那个电话中模拟你需要的任何东西不是更好吗？

标签： javascript vue.js mocha.js vuex

【解决方案1】：

模拟/存根任何依赖项很重要。您的第一个挑战是模拟HTTP 服务，因为正如所写，除非您与后端服务器有互联网连接，否则您的测试将无法通过。查看dependency injection 来解决这个问题。

为了测试动作，我借鉴了Vuex's suggestion 的想法。创建一个 commit 函数的存根，该函数接受操作调用的每个突变的类型和有效负载，然后将其与预期值进行比较。如果预期突变列表与执行操作时commit 存根调用的突变列表匹配，则该操作通过测试。

这是一个我不会在生产中使用的简单示例，但它有助于说明这个想法：

let count = 0
let errors = []
let mutations = [
  { type: 'SET_USER', payload: 'whatever response.data is expected to be' }
]

function commit(type, payload) {
  const mutation = mutations[count]

  try {
    expect(mutation.type).to.equal(type)
    if (payload) { expect(mutation.payload).to.deep.equal(payload) }
  } catch (error) {
    errors.push(error)
  }

  count++
}

actions.loginUser({ commit }, { email: 'fake@email.com', password: '12345' })

【讨论】：