Vue-cli3中的前端单元测试之环境搭建

子车修平

2023-12-01

本文中所用到的测试工具如下
kmci: karma + mocha + chai + istanbul
此文只涉及在vue-cli3中如何集成以上工具，不再详细介绍各个工具

# mocha + chai

首先创建vue-cli3的项目

vue create unit-test

在预设环境中选择unit-test 随后选择mocha + chai

之后项目就自带了vue-cli帮我们集成的mocha和chai

# karma

# 1.安装相关依赖

npm install --save-dev karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack

# 2.配置karma

在项目的根目录执行karma的初始化方法，生成karma.conf.js

karma init

初始化过程中，会有一些选项，用于生成配置文件的默认值。

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

更改生成的karma配置文件

添加了webpack相关的配置，增加了测试文件和需要预编辑的文件的匹配条件式。

// Karma configuration
// Generated on Mon Jul 01 2019 18:02:32 GMT+0800 (GMT+08:00)
let webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
  config.set({
    webpack: webpackConfig,
    // 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: [
      'tests/**/*.spec.js'
    ],

    // list of files / patterns to exclude
    exclude: [
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['spec'],

    // 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: ['ChromeHeadless'],

    // 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
  })
}

# 3.编写测试用例

理论上应为每个Vue组件分别写一个单元测试文件。测试文件名应该为“[组件名].spec.js”，比如组件名为HelloWorld.vue，那么对应的测试文件名为HelloWorld.spec.js

# 4.运行测试用例

在package.json中添加一条script。

"test": "karma start"

然后运行执行命令，开始测试。

npm run test

参考文章 : 若遇到webpack的编译报错请参考原文解决方案

# istanbul

# 1.安装相关依赖

npm install --save-dev babel-plugin-istanbul istanbul-instrumenter-loader nyc

# 2.配置babel

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    'babel-plugin-istanbul'
  ]
}

# 3.配置webpack

vue.config.js

const path = require('path')
module.exports = {
  chainWebpack: config => {
    config.devtool('eval')
    config.module
      .rule('istanbul')
      .test(/\.(js|vue)$/)
      .enforce('post')
      .include.add(path.resolve(__dirname, '/src'))
      .end()
      .use('istanbul-instrumenter-loader')
      .loader('istanbul-instrumenter-loader')
      .options({ esModules: true })
      .end()
  }
}

# 4.配置nyc

nyc是istanbul的命令行工具

package.json

"nyc": {
    "check-coverage": true,
    "per-file": true,
    "lines": 90,
    "statements": 90,
    "functions": 90,
    "branches": 90,
    "include": [
      "src/**/*.{js,vue}"
    ],
    "exclude": [
      "src/*.js"
    ],
    "reporter": [
      "text",
      "lcov",
      "text-summary"
    ],
    "extension": [
      ".js",
      ".vue"
    ],
    "cache": true,
    "all": true
  }