javascript - 测试调用外部 api 的 Vuex 操作

Question

在我的 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 进行单元测试。我如何测试该操作？

Answer 1

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

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

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

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