vue-cli单元测试mocha+chai+Vue Test U

vue-cli创建项目后，项目中会有例子的单元测试文件，只有在上面修改即可。

chaijs

chai是断言库，简单说就是判断结果和你预想的是不是符合
比如：

// 两者是不是相等
expect(2).to.equal(2);

文档中还有很多写法：
https://www.chaijs.com/api/bdd/

Vue Test Utils

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
主要是一些更加简便的写法，比如：

// 判断属性href中的值是不是 #i-set 
expect(use.attributes('href')).to.equal(' #i-set ')

更多写法详见文档：
https://vue-test-utils.vuejs.org/zh/api

mochajs

mocha是一个功能丰富的javascript测试框架，通过它来测试。
https://mochajs.cn/

例子：
example.spec.js

import { expect } from "chai";
import { mount } from "@vue/test-utils";
import gbutton from "@/components/buttons/button.vue"

describe("button.vue的测试", () => {
  it("button.vue的set测试", () => {
      const button = mount(gbutton, {
          // 往gbutton中写入props
          propsData: {
              icon: 'set'
          }
      })
      // 获取use标签内容
      const use = (button.find('svg')).find('use')
      expect(use.attributes('href')).to.equal(' #i-set ')
      expect(2).to.equal(2);
  });
});

然后yarn test:unit
就可以看到测试结果

还有个单元测试工具karma，karma能让你的代码在浏览器环境下测试。
安装依赖

npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

新建karma.conf.js，和package.json同级

var webpackConfig =  require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
    config.set({
        frameworks: ['mocha'],
        files: [
            'tests/**/*.spec.js'   //tests目录下，所有.spce.js结尾的测试文件
        ],
        preprocessors: {
            '**/*.spec.js': ['webpack', 'sourcemap']
        },
        webpack: webpackConfig,
        reporters: ['spec'],
        browsers: ['ChromeHeadless']
    })
}

package.json内增加命令

"test": "karma start"

最后运行yarn test就可以启动karma单元测试了
http://karma-runner.github.io/latest/index.html
https://vue-test-utils.vuejs.org/zh/guides/testing-single-file-components-with-karma.html

补充例子

describe("input.vue的功能测试", () => {
  it("接收 value 测试", () => {
    const wrapper = mount(ginput, {
      propsData: {
        value: "123",
      },
    });
    const vm = wrapper.vm;
    // 获取input标签，不知道为什么用find找不到
    const inputElement = vm.$el.querySelector("input");
    // 判断属性value值是否等于123
    expect(inputElement.value).to.equal("123");
  });
});