详解在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 相关文章推荐
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
angular.js实现购物车功能
Oct 23 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
js实现简易计算器功能
Oct 18 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 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
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python批量处理文件或文件夹
2020/07/28 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
接口可以包含哪些成员
2012/09/30 面试题
银行实习自我鉴定
2013/10/12 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
公司应聘自荐书
2014/06/14 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书