Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase
开源项目 中,我使用了 Vue Cli
的默认测试框架。因此和样式相关的东西,都无法进行测试。因为它并不类似于无头浏览器,而是存在于虚拟内存之中。
现状
在如下 button.spec.js
单元测试用例当中,关于 icon 默认的 order
的测试用例无法进行测试,因为它涉及到了样式。前面已经提到由于它处于虚拟内存之中。因此只要进行单元测试,就会出现以下报错。
// 样式相关的测试用例
it('icon 默认的 order 是 1', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'setting'
}
}) const vm = wrapper.vm
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('1')
})
在查看了 Vue Test Utils
的文档之后。查询到有一个属性 attachToDocument: true,
可以设置,试着把元素放置到 DOM
之中。
// 样式相关的测试用例 添加 attachToDocument: true 属性之后
it('icon 默认的 order 是 1', () => {
const wrapper = mount(Button, {
attachToDocument: true,
propsData: {
icon: 'setting'
}
}) const vm = wrapper.vm
const icon = vm.$el.querySelector('svg')
expect(getComputedStyle(icon).order).to.eq('1')
})
但我添加了之后,仍然无法通过测试。根本原因仍旧是没有使用 Karma
打开浏览器进行测试。
解决过程
- 配置
package.json
在package.json
中添加依赖配置,如下图。
- 安装依赖
使用如下命令安装之前package.json
中添加的依赖。yarn add -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack chai sinon sinon-chai
创建
karma.config.js
在Vue Cli 3
的官方文档 webpack 相关章节中,可以查询到Vue Cli 3
将webpack.config.js
藏到了一个地方,即/node_modules/@vue/cli-service/webpack.config.js
。所以将该路径地址拷贝到
require
之后,让karma
可以读取到webpack
的配置。var webpackConfig = require('@vue/cli-service/webpack.config.js') module.exports = function (config) {
config.set({
frameworks: ['mocha'], files: [
'tests/**/*.spec.js'
], preprocessors: {
'**/*.spec.js': ['webpack', 'sourcemap']
}, webpack: webpackConfig, reporters: ['spec'], browsers: ['ChromeHeadless']
})
}
新的问题
在做完上述 3 个操作流程之后,运行
npx karma start
。又遇到了以下图片中的问题,测试无法进行。一直卡在这个地方。
新问题解决
后来仔细检查之后,发现 karma.config.js
文件名应该是 karma.conf.js
,由于 vue.config.js
文件名的缘故,我错误的认为 karma
的配置文件名也是这种命名规则,所以上述的那个卡住无法进行测试的问题是由于配置文件名称错误导致的。
对比
Vue Cli 3 自带测试框架
无法运行和样式相关的测试用例。因为它并不类似于无头浏览器,而是存在于虚拟内存之中。
这些和样式挂钩的测试用例属性,会被认为是 undefined
,因为对于 Vue Cli 3
自带测试框架而言,这些属性本身就是不存在的。因此无法进行测试。
karma 测试运行器
使用 karma
测试运行器之后,关于样式相关的测试用例可以正常进行运行。但也必须要添加前面提到的 attachToDocument: true,
属性将元素放置到 DOM
之中。
后记
由于组件的样式相关属性也有单元测试的必要,所以我决定将 karma
测试运行器作为我的默认单元测试框架,因此还需要在 package.json
中设置 "test:unit": "karma start",
以便 travis-ci
进行线上持续集成。
关于 GearCase UI
GearCase UI
组件框架已更新维护到 0.2.15
版本,如果喜欢该开源项目,请不要吝惜您的 star
。
项目地址:https://github.com/evenyao/GearCase
官方文档:https://gearcase-ui.cn
Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试的更多相关文章
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- 在vue-cli生成的项目中使用karma+chrome进行单元测试
用vue-cli生成项目时,如果选择了单元测试,那么会采用karma+mocha作为单元测试框架,默认使用的浏览器是PhantomJs. Karma 是一个基于Node.js的JavaScript测试 ...
- Vue-axios 在vue cli中封装
common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...
- scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?
css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
- vue cli使用融云实现聊天
公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
随机推荐
- 使用 libffi 实现 AOP
核心还是利用oc消息的查找派发机制,进行类结构的动态修改,用新函数替换老函数,然后再调用老函数. 前言 众所周知,使用runtime的提供的接口,我们可以设定原方法的IMP,或交换原方法和目标 ...
- HBase学习之路 (十一)HBase的协过滤器
协处理器—Coprocessor 1. 起源 Hbase 作为列族数据库最经常被人诟病的特性包括:无法轻易建立“二级索引”,难以执 行求和.计数.排序等操作.比如,在旧版本的(<0.92)Hba ...
- ES6新特性6:模块Module
本文摘自ECMAScript6入门,转载请注明出处. 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能 ...
- 转载: 国内的go get无法连接问题的解决
转载自CSDN的文章 https://blog.csdn.net/gongpulin/article/details/80972806 国内的go get问题的解决 go get golang.org ...
- 【转】CSDN离线网页html文件自动跳转
问题: 最近使用OneNote2016剪辑csdn的文章时,发现一些公式/文本框不能被正确识别,所以离线保存网页的html文件. 但是每次打开html文件,都会自动跳转的CSDN主页,即使断网,也会自 ...
- 柯朗微积分与数学分析习题选解(1.3 节 b)
一直在读<陶哲轩实分析>,陶的书非常的严谨,环环相扣,但是也有个缺点就是计算性的例子和应用方面的例子太少了.所以就又找了本柯朗的<微积分与数学分析>搭配着看.柯朗的书的习题与陶 ...
- PKUWC2019题解
这里其实只放一下题面和一些提示,大家评一评有几道题可做 题面全部蒯自xzz的博客 Day 1 T1 题面 一个有向图,每一条边可能存在也可能不存在,求拓扑序列数量的期望乘\(2^m\) 没有重边自环, ...
- 3235: [Ahoi2013]好方的蛇
3235: [Ahoi2013]好方的蛇 链接 分析: 可以求出以每个点为顶点的满足条件的矩形有多少个,单调栈求.设为sum. 然后对这个数组进行二维前缀和,可以求出每个矩阵内,以右下角.左下角为端点 ...
- [BZOJ3451]normal 点分治,NTT
[BZOJ3451]normal 点分治,NTT 好久没更博了,咕咕咕. BZOJ3451权限题,上darkbzoj交吧. 一句话题意,求随机点分治的期望复杂度. 考虑计算每个点对的贡献:如果一个点在 ...
- 很详细的SpringBoot整合UEditor教程
很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529 版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...