继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

使用Jest测试Vuex Action

开心每一天1111
关注TA
已关注
手记 516
粉丝 48
获赞 218

在隔离状态下测试Action是非常直接的。action应该与调用它的组件解耦,独立的进行测试。

本文主要讲述在组件中正确的测试action


我正在书写一本关于VUE应用程序测试的开源书籍。它包括Vue组件、Vuex和Vue Router。这是一些来源和贡献指南(欢迎所有人提出idea)

本文中涉及到的测试代码 点击查看


创建 Action

我们先按照普通Vuex模式写一个action。

  1. 对API进行异步调用

  2. 对数据做一些处理(可选)

  3. 把结果作为moutation的参数进行提交

有一个身份验证action,它将用户名和密码发送到外部API,检查它们是否匹配。然后提交SET_AUTHENTICATED moutation 来更新状态。

action 测试 assert:

  1. api调用正确吗?

  2. payload正确吗?

  3. 提交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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP