Vue Cli 中使用 Karma / Chrome 执行样式相关单…
2019-01-15 07:02:28来源:博客园 阅读 ()
在 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
原文链接:https://www.cnblogs.com/evenyao/p/10266357.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- vue.js开发环境搭建教程 2020-03-16
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash