详解在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 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
js如何获取网页所有图片
May 12 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP生成随机数的方法实例分析
2015/01/22 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python连接mongodb密码认证实例
2018/10/16 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python实现微信打飞机游戏
2020/03/24 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
司机岗位职责
2013/11/15 职场文书
家长给老师的道歉信
2014/01/13 职场文书
公关活动策划方案
2014/05/25 职场文书
学校四群教育实施方案
2014/06/12 职场文书
建设工程授权委托书
2014/09/22 职场文书
工作收入住址证明
2014/10/28 职场文书
纪录片信仰观后感
2015/06/08 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB