Vuex - Actions - 《Vue测试指南（vue.js 2）》

编写测试
改良

本页中描述的测试源码可以在这里找到。

创建 action

我们会遵循一个通常的 Vuex 模式创建一个 action：

发起一个向 API 的异步请求
对数据进行一些处理（可选）
根据 payload 的结果 commit 一个 mutation

这里有一个 action，用来将 username 和 password 发送到外部 API 以检查它们是否匹配。然后其认证结果将被用于通过 commit 一个 SET_AUTHENTICATED mutation 来更新 state，该 mutation 将认证结果作为 payload。

action 的测试应该断言：

是否使用了正确的 API 端？
payload 是否正确？
根据结果，是否有正确的 mutation 被 commit

让我们进行下去并编写测试，并让报错信息指引我们。

describe("authenticate", () => {
  it("authenticated a user", async () => {
    const commit = jest.fn()
    const username = "alice"
    const password = "password"
    await actions.authenticate({ commit }, { username, password })
    expect(url).toBe("/api/authenticate")
    expect(body).toEqual({ username, password })
    expect(commit).toHaveBeenCalledWith(
  })
})

因为 axios 是异步的，为保证 Jest 等到测试完成后才执行，我们需要将其声明为 async 并在其后 await 那个 actions.authenticate 的调用。不然的话（译注：即假如不使用 async/await 而仅仅将 3 个 expect 断言放入异步函数的 then() 中）测试会早于 expect 断言完成，并且我们将得到一个常绿的 — 一个不会失败的测试。

这个错误来自 axios 的某处。我们发起了一个对 /api... 的请求，并且因为我们运行在一个测试环境中，所以并不是真有一个服务器在处理请求，这就导致了错误。我们也没有定义 url 或 body — 我们将在解决掉 axios 错误后做那些。

因为使用了 Jest，我们可以用 jest.mock 容易地 mock 掉 API 调用。我们将用一个 mock 版本的代替真实的，使我们能更多地控制其行为。Jest 提供了，非常适于 mock axios。

axios 的 mock 看起来是这样的：

let url = ''
let body = {}
jest.mock("axios", () => ({
  post: (_url, _body) => { 
    return new Promise((resolve) => {
      url = _url
      body = _body
      resolve(true)
    })
  }
}))

我们将 url 和 body 保存到了变量中以便断言正确的时间端点接收了正确的 payload。因为我们不想实现真正的端点，用一个理解 resolve 的 promise 模拟一次成功的 API 调用就够了。

yarn unit:pass 现在测试通过了！

测试 API Error

咱仅仅测试过了 API 调用成功的情况，而测试所有产出的可能情况也是重要的。让我们编写一个测试应对发生错误的情况。这次，我们将先编写测试，再补全实现。

我们要找到一种强制 axios mock 抛出错误的方法。正如 mockError 变量代表的那样。将 axios mock 更新为：

let url = ''
let body = {}
let mockError = false
jest.mock("axios", () => ({
  post: (_url, _body) => { 
    return new Promise((resolve) => {
      if (mockError) 
      url = _url
      body = _body
      resolve(true)
    })
  }
}))

只有当一个 ES6 类 mock 作用域外的（out-of-scope）变量以 mock 为前缀时，Jest 才允许访问它（译注：查看文档）。现在我们简单地赋值 mockError = true 然后 axios 就会抛出错误了。

运行该测试给我们这些报错：

成功的抛出了一个错误… 却并非我们期望的那个。更新 authenticate 以达到目的：

export default {
  async authenticate({ commit }, { username, password }) {
    try {
      const authenticated = await axios.post("/api/authenticate", {
        username, password
      })
      commit("SET_AUTHENTICATED", authenticated)
    } catch (e) {
      throw Error("API Error occurred.")
    }
  }
}

现在测试通过了。

现在你知道如何单独地测试 actions 了。至少还有一项潜在的改进可以为之，那就是将 axios mock 实现为一个。这包含在 node_modules 的同级创建一个 __mocks__ 目录并在其中实现 mock 模块。Jest 将自动使用 __mocks__ 中的 mock 实现。在 Jest 站点和因特网上有大量如何做的例子。将本文中的测试重构为一个 manual mock 就留给读者作为练习吧。

总结

使用 Jest ES6 class mocks
测试一个 action 成功和失败的情况

本页中描述的测试源码可以在这里找到。