在 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