【xingorg1-ui】基于vue3.0从0-1搭建组件库 (九) 单元测试配置

2021年09月15日 阅读数:5
这篇文章主要向大家介绍【xingorg1-ui】基于vue3.0从0-1搭建组件库 (九) 单元测试配置,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

(九) 单元测试环境配置webpack

karma:进行浏览器UI测试

http://karma-runner.github.io/git

一、依赖安装

# Install Karma && Install plugins that your project needs:
$ npm install -D karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack karma-chai mocha
image.png
image.png

二、karma.conf.js配置文件

// karma.conf.js http://karma-runner.github.io/
const webpackConfig = require('@vue/cli-service/webpack.config')

module.exports = function(config{
  config.set({
    frameworks: ['mocha'], // 测试框架列表,可用的框架:https://npmjs.org/browse/keyword/karma-adapter
    files: ['tests/**/*.spec.js'], // 被测试文件列表,测试文件tests下的全部spec.js文件
    preprocessors: { // 预处理器:容许您在文件被提供给浏览器以前对其进行处理
      '**/*.spec.js': ['webpack''sourcemap'//  // 可用的预处理: https://npmjs.org/browse/keyword/karma-preprocessor
    },
    autoWatchtrue// 启用或禁用自动检测文件变化进行测试
    webpack: webpackConfig,
    reporters: ['spec'], // 使用测试结果报告者(https://npmjs.org/browse/keyword/karma-reporter)单测、覆盖率coverage报告
    browsers: [ // 测试启动的浏览器, 可用的浏览器 http://karma-runner.github.io/5.2/config/browsers.html
      'ChromeHeadless' // 无头浏览器,不会展现出来。其余参数如'Chrome'。可用的浏览器:https://www.npmjs.com/search?q=keywords:karma-launcher
    ]
  })
}

三、package.json脚本配置

"scripts": {
    "test:ui""karma start",
},

四、单测用例

demo

utils>example.spec.jsgithub

import { expect } from 'chai' // jest中的断言库
// import { shallowMount } from '@vue/test-utils' // 当前包目前不兼容vue3

describe('测试用例', () => {
  it('1+1=3吗', () => {
    expect(1+1).to.eq(2)
  })
})

断言库 - chai

https://www.chaijs.com/web

手写用例-button.spec.js(有报错,再研究吧)

import { expect } from 'chai'
import GjfButton from 'packages/button'
// import {createApp} from 'vue' // '[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".'
import { createApp } from 'vue/dist/vue.esm-bundler.js' // 上边的代码,组件提供了template选项,可是运行时不支持,须要引入vue/dist/vue.esm-bundler.js这个文件才能渲染template
describe('button按钮测试用例', () => {
  it('是否是button按钮啊?', () => {
    /* 
    const contianer = document.createElement('div')
    const app = createApp({
      template: `<gjf-button />`,
      components: {
        'gjf-button': GjfButton
      }
    })
    app.mount(contianer)
    let html = app.$el.innerHTML // TypeError: Cannot read property 'innerHTML' of undefined 
    expect(html).to.eq('button')
    */

    const container = document.createElement('div')
    const app = createApp({
      template`<gjfButton />`,
      components: {
        'gjfButton': GjfButton
      }
    }).mount(container)
    console.log(app, 111, app.$el)
    let html = app.$el
    expect(html).to.match('button')
  })
})

五、测试执行

测试经过

image.png
image.png

测试失败:

image.png
image.png