在隔离状态下测试Action是非常直接的。action应该与调用它的组件解耦，独立的进行测试。
本文主要讲述在组件中正确的测试action
我正在书写一本关于VUE应用程序测试的开源书籍。它包括Vue组件、Vuex和Vue Router。这是一些来源和贡献指南（欢迎所有人提出idea）
本文中涉及到的测试代码 点击查看
创建 Action
我们先按照普通Vuex模式写一个action。
对API进行异步调用
对数据做一些处理（可选）
把结果作为moutation的参数进行提交
有一个身份验证action，它将用户名和密码发送到外部API，检查它们是否匹配。然后提交SET_AUTHENTICATED moutation 来更新状态。
action 测试 assert:
api调用正确吗？
payload正确吗？
提交mutation正确吗？
让我们继续写测试，让失败的消息指导我们。
测试
由于axios是异步的，为了确保Jest等待测试完成，我们需要将其声明为异步的，然后等待对action.authenticate的调用。否则，测试将在预期断言之前完成，我们将会看到一个常青树一样的测试——一个永远不会失败的测试。
运行上面的测试给了我们以下的失败信息：
这个错误来自Axios内部。我们正在向/api...发出请求，并且由于我们在测试环境中运行，所以甚至没有服务器向其发出请求，因此出现错误。我们也没有定义url或bod，我们应该这样做
由于我们正在使用Jest，所以可以很容易地使用jest.mock模拟API调用。我们将使用模拟的axios,而不是真实的axios，这将使我们对它的行为有更多的处理。JEST提供了ES6 Class Mocks，这是一个非常适合模拟axios的工具。
axios 模拟如下
axios 模拟如下
我们将url和body保存到变量中，由于我们可以确定返回值是正确的。因此不需要等待返回值，我们可以立即给API调用的promise返回resolve（成功）
测试通过
测试api的异常情况
我们只测试了API调用成功的情况。测试所有可能的结果是很重要的。让我们为发生错误的情况写一个测试。这一次，我们先写测试，然后再执行。
测试用例可以写成这样:
我们需要找到一种方法来强制axios模拟抛出一个错误，我们选择使用MockError变量。更新axios模拟：
如果变量名称是用mock预置的话， JEST允许在ES6类模拟中访问外部变量。现在我们可以简单地写mockError＝true，AXIOS将抛出一个错误。
运行这个测试给我们错误信息如下:
成功地捕获了一个错误……但不是我们预期的那个错误。更新身份验证以抛出测试所预期的错误：
测试通过。
改进
现在你知道如何孤立地测试action了。至少有一个可能成功的优化， 作为一个 manual mock调用axion 模拟.（https：/ / jestjs。IO /文档/ EN /手动嘲笑）。在node_modules同级创建一个MOCK目录，并在那里实现模拟模块。
通过使用手动模拟，您可以在所有测试中共享模拟实现。JEST将自动使用MOCK模拟实现。在Jest网站和互联网上有很多关于如何做到这一点的例子。使用手动模拟重构这个测试作为练习留给读者。
结论
本文指南:
使用 Jest ES6 class 模拟
测试action成功个和失败的情况
在这里可以找到本页描述的测试的源代码
译文出处：https://www.zcfy.cc/article/testing-vuex-actions-correctly-with-jest
共同学习，写下你的评论
评论加载中...
作者其他优质文章
