详解在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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
web 页面分页打印的实现
Jun 22 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
浅析java线程中断的办法
Jul 29 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
微信小程序入门之指南针
Oct 22 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作的文本留言本的例子(二)
2006/10/09 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Django模板语言 Tags使用详解
2019/09/09 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
什么是唯一索引
2015/07/05 面试题
2014年银行工作总结范文
2014/11/12 职场文书
如何写通讯稿
2015/07/22 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript
MySQL常见优化方案汇总
2022/01/18 MySQL