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