详解在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 相关文章推荐
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
JS代码编译器Monaco使用方法
Jun 11 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
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
做网页的一些技巧
2007/02/01 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python实现八大排序算法
2016/08/13 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
python实现12306火车票查询器
2017/04/20 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python换行与不换行的输出实例
2020/02/19 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
奥地利网上书店:Weltbild
2017/07/14 全球购物
小学生家长评语集锦
2014/01/30 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书