详解在vue-test-utils中mock全局对象


Posted in Javascript onNovember 07, 2018

vue-test-utils   提供了一种 mock 掉   Vue.prototype   的简单方式,不但对测试用例适用,也可以为所有测试设置默认的 mock。

mocks   加载选项

mocks   加载选项   是一种将任何属性附加到   Vue.prototype   上的方式。这通常包括:

  • $store , for Vuex
  • $router , for Vue Router
  • $t , for vue-i18n

以及其他种种。

vue-i18n   的例子

我们来看一个 vue-i18n   的例子。虽然可以为每个测试用到   createLocalVue   并安装   vue-i18n ,但那样可能会让事情难以处理并引入一堆样板。首先,组件   <Bilingual>   用到了   vue-i18n :

<template>
 <div class="hello">
  {{ $t("helloWorld") }}
 </div>
</template>

<script>
 export default {
  name: "Bilingual"
 }
</script>

你先在另一个文件中弄好翻译,然后通过 $t   引用,这就是   vue-i18n   的工作方式。在本次测试中,虽然并不会真正关心翻译文件看起来什么样,不过还是看一看这次用到的:

export default {
 "en": {
  helloWorld: "Hello world!"
 },
 "ja": {
  helloWorld: "こんにちは、世界!"
 }
}

基于这个 locale,正确的翻译将被渲染出来。我们先不用 mock,尝试在测试中渲染该组件:

import { shallowMount } from "@vue/test-utils"
import Bilingual from "@/components/Bilingual.vue"

describe("Bilingual", () => {
 it("renders successfully", () => {
  const wrapper = shallowMount(Bilingual)
 })
})

通过 yarn test:unit   运行测试将抛出一堆错误堆栈。若仔细端详输出则会发现:

[Vue warn]: Error in config.errorHandler: "TypeError: _vm.$t is not a function"

这是因为我们并未安装 vue-i18n ,所以全局的   $t   方法并不存在。我们试试   mocks   加载选项:

import { shallowMount } from "@vue/test-utils"
import Bilingual from "@/components/Bilingual.vue"

describe("Bilingual", () => {
 it("renders successfully", () => {
  const wrapper = shallowMount(Bilingual, {
   mocks: {
    $t: (msg) => msg
   }
  })
 })
})

现在测试通过了! mocks   选项用处多多,而我觉得最最常用的正是开头提到过的那三样。

(译注:通过这种方式就不能在单元测试中耦合与特定语言相关的内容了,因为翻译功能实际上已失效,也更无法处理可选参数等)

使用配置设置默认的 mocks

有时需要一个 mock 的默认值,这样就不用为每个测试用例都设置一遍了。可以用 vue-test-utils   提供的   config   API 来实现。还是   vue-i18n   的例子:

import VueTestUtils from "@vue/test-utils"

VueTestUtils.config.mocks["mock"] = "Default Mock Value"

这个示例中用到了 Jest,所以我将把默认 mock 描述在 jest.init.js   文件中 -- 该文件会在测试运行前被自动加载。同时我也会导入并应用此前用于示例的翻译对象。

//jest.init.js

import VueTestUtils from "@vue/test-utils"
import translations from "./src/translations.js"

const locale = "en"

VueTestUtils.config.mocks["$t"] = (msg) => translations[locale][msg]

现在尽管还是用了一个 mock 过的 $t   函数,但会渲染一个真实的翻译了。再次运行测试,这次移除了   mocks   加载选项并用   console.log   打印了   wrapper.html() 。

describe("Bilingual", () => {
 it("renders successfully", () => {
  const wrapper = shallowMount(Bilingual)

  console.log(wrapper.html())
 })
})

测试通过,以下结构被渲染出来:

<div class="hello">
 Hello world!
</div>

(译注:依然无法应付复杂的翻译)

总结

本文论述了:

  • 在测试用例中使用 mocks   以 mock 一个全局对象
  • 用 config.mocks   设置默认的 mock

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
js+css3制作时钟特效
Oct 16 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
微信小程序的部署方法步骤
Sep 04 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
一文了解Vue中的nextTick
May 06 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue-cli 首屏加载优化问题
Nov 06 #Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 #Javascript
vue组件tabbar使用方法详解
Nov 06 #Javascript
微信小程序下拉框功能的实例代码
Nov 06 #Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
You might like
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
js实现圆形菜单选择器
2020/12/03 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
如何提高python 中for循环的效率
2020/04/15 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
住宅质量保证书
2014/04/29 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
代理词怎么写
2015/05/25 职场文书
六年级作文之预言作文
2019/10/25 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers