详解在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数据结构之二叉搜索树实现方法
Nov 25 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 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 cli 小技巧
2013/06/03 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
用vue写一个日历
2020/11/02 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
保密承诺书
2014/03/27 职场文书
团日活动总结
2014/04/28 职场文书
先进个人材料怎么写
2014/12/30 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
高中物理教学反思
2016/02/19 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
Python 正则模块详情
2021/11/02 Python