为了账号安全,请及时绑定邮箱和手机立即绑定

使用Jest测试Vuex Action

标签:
Vue.js

在隔离状态下测试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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消