使用Karma做vue組件單元測(cè)試的實(shí)現(xiàn)
養(yǎng)成良好的編碼習(xí)慣,一個(gè)合格的程序員需要掌握一些編寫單元測(cè)試的能力。單元測(cè)試也可以整體上提升我們的代碼質(zhì)量,這里介紹下 VUE 組件的單元測(cè)試。
如果想直接通過(guò) Demo 學(xué)習(xí),可以跳過(guò)下面的內(nèi)容,點(diǎn)擊這里下載示例
技術(shù)棧
- @vue/test-utils[1.0.0-beta.30]
- istanbul-instrumenter-loader[3.0.1]
- karma[4.4.1]
- karma-chrome-launcher[3.1.0]
- karma-mocha[1.3.0]
- karma-sourcemap-loader[0.3.7]
- karma-coverage-istanbul-reporter[2.1.1]
- karma-webpack[4.0.2]
- webpack[4.41.5]
定義配置文件
karma.conf.js 文件用于 karma 的配置,使用 node_modules/.bin/karma init 命令創(chuàng)建該文件,我們定義如下配置:
// Karma configuration const webpackConfig = require('./config/webpack.test.config.js') module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '.', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: [ 'mocha' ], // list of files / patterns to load in the browser files: [ 'test/**/*.spec.js' ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { 'test/**/*.spec.js': [ 'webpack', 'sourcemap' ] }, // webpack config webpack: webpackConfig, webpackMiddleware: { stats: 'errors-only' }, // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: [ 'Chrome' ], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) }
- 設(shè)置 frameworks 為 ['mocha'],即使用 mocha 測(cè)試框架
- 設(shè)置 files 為 ['test/**/*.spec.js'],即對(duì) test 目錄下所有的后綴為 .spec.js 文件測(cè)試
- 設(shè)置 preprocessors 為 {'**/*.spec.js': ['webpack', 'sourcemap']},即使用 webpack,sourcemap 對(duì)所有的測(cè)試文件進(jìn)行 webpack 打包
- 設(shè)置 browsers 為 Chrome,即使用 Chrome 瀏覽器作為測(cè)試瀏覽器
編寫測(cè)試用例
詳細(xì)的關(guān)于 @vue/test-utils 用法,查看 https://vue-test-utils.vuejs.org/zh/
import { expect } from 'chai' import { shallowMount } from '@vue/test-utils' import Header from '../src/components/Header' describe('Header', () => { const wrapper = shallowMount(Header) const header = wrapper.find('header') const h1 = wrapper.find('h1') it('有 header 標(biāo)簽', () => { expect(header.exists()).to.be.true }) it('有 h1 標(biāo)簽', () => { expect(h1.exists()).to.be.true }) it('h1 的文案為“VUE 單頁(yè)模版”', () => { expect(h1.text()).to.equal('VUE 單頁(yè)模版') }) it('h1 標(biāo)簽在 header 標(biāo)簽中', () => { expect(header.contains('h1')).to.be.true }) })
這里我引用 vue-single-page 的 Header 組件測(cè)試用例
- 首先通過(guò) shallowMount 獲取 wrapper
- 使用 chai 斷言庫(kù)編寫相關(guān)的測(cè)試用例
運(yùn)行結(jié)果
i 「wdm」: Compiled successfully.
15 01 2020 18:28:13.799:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/
15 01 2020 18:28:13.813:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
15 01 2020 18:28:13.820:INFO [launcher]: Starting browser Chrome
15 01 2020 18:28:17.075:INFO [Chrome 79.0.3945 (Windows 10.0.0)]: Connected on socket PUKPz4iBuFzeVNSsAAAA with id 91716917
TOTAL: 4 SUCCESS
可以看到我們的單元測(cè)試已經(jīng)通過(guò)了
測(cè)試覆蓋率報(bào)告
測(cè)試完成后,我們需要查看測(cè)試覆蓋率報(bào)告。這需要在 webpack.test.config.js 和 karma.conf.js 中做一些配置修改
webpack.test.config.js
const merge = require('webpack-merge') const path = require('path') const webpackCommonConfig = require('./webpack.common.config') const testConfig = { devtool: 'inline-source-map', mode: 'none', module: { rules: [ { test: /\.spec.js$/i, enforce: 'pre', use: [ { loader: 'istanbul-instrumenter-loader', options: { esModules: true } } ] } ] } } module.exports = merge(webpackCommonConfig, testConfig)
添加一個(gè)優(yōu)先執(zhí)行的編譯 .spec.js 文件的 rules,loader 使用 istanbul-instrumenter-loader 并開啟 esModules 模式
karma.conf.js
module.exports = function(config) { config.set({ // ... coverageIstanbulReporter: { reports: [ 'html', 'text' ], fixWebpackSourcePaths: true }, reporters: [ 'coverage-istanbul' ] //... }) }
- 設(shè)置 reporters 為 [ 'coverage-istanbul' ],即使用 coverage-istanbul reporters
- coverageIstanbulReporter 配置項(xiàng)用于設(shè)置 coverage-istanbul 的參數(shù),詳細(xì)的參數(shù)可以參考 這里
運(yùn)行結(jié)果
再次執(zhí)行單元測(cè)試,我們會(huì)看到測(cè)試覆蓋率的相關(guān)信息
----------------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | ----------------|----------|----------|----------|----------|-------------------| All files | 100 | 100 | 100 | 100 | | Header.spec.js | 100 | 100 | 100 | 100 | | ----------------|----------|----------|----------|----------|-------------------|
也可以通過(guò)生成到 coverage 目錄下的網(wǎng)頁(yè)文件,在瀏覽器中查看
參考資料
https://vue-test-utils.vuejs.org/zh/
https://github.com/mattlewis92/karma-coverage-istanbul-reporter
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié))
這篇文章主要介紹了5分鐘學(xué)會(huì)Vue動(dòng)畫效果(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07vue 中directive功能的簡(jiǎn)單實(shí)現(xiàn)
本篇介紹directive的簡(jiǎn)單實(shí)現(xiàn),主要學(xué)習(xí)其實(shí)現(xiàn)的思路及代碼的設(shè)計(jì),需要的朋友參考下吧2018-01-01vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
工作中遇到需要根據(jù)單元格某個(gè)屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能
這篇文章主要介紹了vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼
這篇文章主要介紹了Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09vue項(xiàng)目實(shí)現(xiàn)便捷接入百度地圖API
部分項(xiàng)目需要地圖的嵌入,這篇文章主要介紹了vue項(xiàng)目中調(diào)用百度地圖API使用方法,其他的地圖調(diào)用與之類似,有需要的朋友可以借鑒參考下,希望能夠有所幫助2022-04-04Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件
這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04