现状

在如下 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']   }) }

  关键字：