vuecli3.0+vue-test-utils+mocha+k

2018-12-24 本文已影响0人 halowyn

vuecli3.0+vue-test-utils+mocha+karma生成单元测试

1、用vuecli3.0创建一个文件夹unit

vue create unit

可以选择默认配置，也可以根据自己的需要手动配置

此处输入图片的描述

2、安装相关依赖

安装karma

 npm install karma -g

并且在安装的项目中使用

npm install karma  --save-dev

需要全局安装，可以使用命令行。

安装完成以后，命令行输入 karma start

此处输入图片的描述
在浏览器输入http://localhost:9876/
![此处输入图片的描述]
如果出现以上信息，表示karma已经安装成功。

karma配置
初始化karma配置文件karma.conf.js
- ctrl+c 结束刚才启动的Karma
- 在命令行输入karma init
  
  此处输入图片的描述
- 接下就是一段询问关于配置的问题。（ps：karma.conf.js配置可以自己修改，这里是快速生成配置）

Which testing framework do you want to use?（你想要使用哪个测试框架？）
默认是jasmine。（如果你想用其他可以自己修改），直接回车下一步
Do you want to use Require.js ? （你要使用Require.js吗？）
This will add Require.js plugin. （这将添加Require.js插件。）
Press tab to list possible options. Enter to move to the next question. （按选项卡列出可能的选项。输入转到下一个问题。）
默认是no。（现在都在使用webpack打包，这也是为什么你肯定奇怪的地方，单元测试为什么要用webpack），直接回车下一步
Do you want to capture any browsers automatically ? （你想要在哪些浏览器里面运行）
Press tab to list possible options. Enter empty string to move to the next question.（和上面一样）
默认是Chrome。（你可以添加更多浏览器回车就是填写下一个浏览器名称，必须是你电脑安装的浏览器，最好还是去karma.conf.js添加直观一些），直接按2次回车下一步
What is the location of your source and test files ?（测试文件的位置是什么？）
You can use glob patterns, eg. "js/.js" or "test//Spec.js".（你可以使用glob模式，例如。 “js / .js”或“test / ** / * Spec.js”）
Enter empty string to move to the next question.（输入空字符串移动到下一个问题。）
默认是空，这个是配置你的单元测试用例的文件，根据自己项目和喜好，你可以把测试用例文件和当前被文件放在一起，例如angular-cli就是这样的。也可以单独分离放到test文件下，github大量的npm包都是这样的。我这里就学angular-cli做法，填写：tests/****/.spec.js，就是说tests文件夹下的所有.spec.js后缀都是t测试用例文件。回车下一步

此处输入图片的描述
此处输入图片的描述
vue生成的目录里已经有单元测试的文件夹，目录机构如下：
此处输入图片的描述
如果不想建，可以直接下一步，等会到karma.conf.js修改。
Should any of the files included by the previous patterns be excluded ?（是否应排除某些包含的任何文件？）
You can use glob patterns, eg. "/.swp". （您可以使用glob模式，例如。“/.SWP”。）
这是为了性能优化，排除那些文件不需要去监听，加快运行速度。如果你不确定要排除哪些文件，可以去karma.conf.js修改。我就直接直接下一步了。
Do you want Karma to watch all the files and run the tests on change ? （你想要Karma来监听所有的文件，并在变化中运行测试吗？）
Press tab to list possible options. （按选项卡列出可能的选项。）
默认yes，它的意思你写完了.spec.js后缀文件会自动运行测试，等我们把Karma跑起来，在自动运行。
这里no。
这就生成出来了配置
找一款你顺手的编辑器打开它，（我的用vscode）

接下来就说关于依赖插件plugins

需要可以打开Chrome浏览器的插件 npm install karma-chrome-launcher --save-dev
需要可以运行mocha的插件 npm install karma-mocha --save-dev
需要可以运行webpack的插件 npm install karma-webpack --save-dev
需要可以显示sourcemap的插件 npm install karma-sourcemap-loader --save-dev
需要可以显示测试代码覆盖率的插件 npm install karma-coverage-istanbul-reporter --save-dev
插件就先安装这么多，后面需要在安装，可以这样一起安装：

npm install karma-chrome-launcher karma-mocha karma-webpack karma-sourcemap-loader karma-coverage-istanbul-reporter --save-dev
把插件写到karma.conf.js配置里面去

此处输入图片的描述

我们先只需要前2个，后面注释起来，让karma能随时跑起来。
然后去package.json 配置一个npm命令，编辑器或者ide可以直接运行npm命令。

此处输入图片的描述
我们karma配置可以运行起来，点击浏览器的debug按钮，在新页面中右键检查，看到报错如下：
此处输入图片的描述
是因为浏览器无法识别es6语法导致的，那么我们需要安装babel的相关依赖解决这个问题，babel的依赖包尽量保持一致，这里我们使用7.*版本

npm i -D @babel/core @babel/preset-env babel-loader babel-plugin-istanbul @babel/plugin-syntax-dynamic-import
同时需要安装webpack，这里需要注意，
webpack4.版本需要安装的vue-loader也是14.，否则会报错无法识别vue语法
babel版本要一致
我们在根目录下新建babel配置文件:.babelrc文件，输入内容：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

在karma.conf.js文件对webpack配置识别vue路径别名@

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'static': path.resolve(__dirname, '../static') // 增加这一行代码
    }
}

我们对比一下安装的所有依赖：

此处输入图片的描述

package.json文件如下：

{
  "name": "unit",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "unit": "karma start"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vue-loader": "^14.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-unit-mocha": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-loader": "^8.0.4",
    "babel-plugin-istanbul": "^5.1.0",
    "chai": "^4.1.2",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "istanbul-instrumenter-loader": "^3.0.1",
    "karma-mocha": "^1.3.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^3.0.5",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.28.0",
    "webpack-dev-server": "^3.1.13"
  }
}

配置完成后的karma.conf.js文件如下：

// Karma configuration
// Generated on Thu Dec 20 2018 22:30:40 GMT+0800 (CST)
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
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: [
      '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: {
      'tests/**/*.spec.js': ['webpack', 'sourcemap']
    },

    plugins: [
      'karma-chrome-launcher',
      'karma-mocha',
      'karma-webpack',
      'karma-sourcemap-loader',
      'karma-coverage-istanbul-reporter'
    ],
    webpack: {
      devtool: 'inline-source-map',
      module: {
        rules: [{
          test: /\.js$/,
          use: {
            loader: 'istanbul-instrumenter-loader',
            options: { esModules: true }
          },
          enforce: 'pre',
          exclude: /node_modules|\.spec\.js$/
        }, {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-syntax-dynamic-import', 'istanbul']
          }
        }, {
          test: /\.vue$/,
          loader: 'vue-loader'
        }]
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'static': path.resolve(__dirname, '../static') // 增加这一行代码
        }
      }
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['coverage-istanbul'],
    // 配置覆盖率报告的查看方式配置
    coverageIstanbulReporter: {
      // 可以用什么形式展示 支持以下格式：clover、cobertura、html、json-summary、json、lcov、lcovonly、none、teamcity、text-lcov、text-summary、text
      // 可以看连接 : https://github.com/istanbuljs/istanbul-reports/tree/590e6b0089f67b723a1fdf57bc7ccc080ff189d7/lib
      reports: ['html', 'text-summary'],
      // 结果存放的位置
      dir: 'coverage/',
      // 如果使用webpack和预加载器，可以绕过webpack打破源路径
      fixWebpackSourcePaths: true,
      // 停止输出消息，如`File [$ {filename}]忽略，没有任何东西可以映射
      skipFilesWithNoCoverage: true,
      // 大多数记录接受额外的配置选项。 你可以通过`report-config`选项传递这些
      'report-config': {
        // 配置html
        html: {
          // 输出到 ./coverage/html
          subdir: 'html'
        }
      }
    },

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

至此，配置完成，全部覆盖，ok完工

vuecli3.0+vue-test-utils+mocha+k

vuecli3.0+vue-test-utils+mocha+karma生成单元测试

1、用vuecli3.0创建一个文件夹unit

2、安装相关依赖

猜你喜欢

热点阅读