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