[Vue] karme/jasmine/webpack/vue搭建測試環境

karma 和 jasmine

karma 是 google 開源的一個基於 Node.js 的 JavaScript 前端測試運行框架，前身叫 Testacular. jasmine 是一個 javascript 測試框架 mocha 是一個 javascript 測試框架 chai 是一個斷言庫

通常組合是 karma + jasmine(自帶斷言庫) 或者 karma + mocha +chai ,使用哪一種看心情就好.這裏用 karma + jasmine

安裝依賴

karma-cli 用來全局使用 karma 命令

npm install karma-cli -g

輸入 karma --version
輸出 Karma version: 4.0.1

而後安裝 karma 和 jasmine

npm install karma --save-dev
npm install karma-jasmine --save-dev

安裝瀏覽器支持

npm install karma-chrome-launcher --save-dev

想支持其餘瀏覽器就將 karma-chrome-launcher 中間的換成其餘瀏覽器就比如如(karma-firefox-launcher,karma-ie-launcher)

安裝覆蓋率測試

npm install karma-coverage

package.json(沒怎麼升級過)

"devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "chai": "^4.2.0",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.5",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^2.0.1",
    "karma-webpack": "^3.0.5",
    "mocha": "^5.2.0",
    "rollup-plugin-babel": "^3.0.5",
    "rollup-plugin-node-resolve": "^4.0.0",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },

karma 的使用

karma 的 3 個命令 start,init,run

首先是 karma init,用來生成 karma.conf.js 文件做爲 karma 的默認配置文件,這個文件能夠叫其它名字.

D:\ComProjects>karma init

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

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


Config file generated at "D:\ComProjects\haocai\pc.haocai\karma.conf.js".

而後就是 karma start,會本身找到 karma.config.js 配置文件並執行,若是配置文件更名了,就執行 karma start filename.成功了就出現一個小的 chrome,這個窗口若是不中斷進程,點擊 x 關閉也會本身打開.

karma run 則在 karma start 以後對 karma 直接執行測試

單元測試

jasmine

• describe(string, function)：一個測試集,用來劃分單元測試的，describe 是能夠嵌套使用的

• it(string, function)：測試用例

• expect：斷言表達式

修改 karma.conf.js 的 files 字段

files: ["src/**/*.js", "test/**/*.test.js"],

在 src 文件夾中建立 hello.js

function hello() {
  return "hello world";
}

在 test 文件夾中新建 hello.test.js (spec.js 也行)

describe('測試hello方法', function () {
  it('出來的是否是hello world呢?', function () {
    expect("hello world").toEqual(hello());
  });
});

啓動測試

D:\ComProjects>karma start
18 03 2019 19:13:30.453:WARN [karma]: No captured browser, open http://localhost:9876/
18 03 2019 19:13:30.500:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
18 03 2019 19:13:30.502:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
18 03 2019 19:13:30.515:INFO [launcher]: Starting browser Chrome
18 03 2019 19:13:31.371:INFO [Chrome 72.0.3626 (Windows 10.0.0)]: Connected on socket lrQtIUbS58RiCehKAAAA with id 27174253
Chrome 72.0.3626 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.005 secs / 0.001 secs)
TOTAL: 1 SUCCESS

此時打開另一個控制檯執行 karma run 會將測試再次執行一次(只能在 karma start 以後執行)

測試覆蓋率

使用 karma-coverage 來測試代碼覆蓋率

修改 karma.conf.js

// preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/**/*.test.js': ['coverage']
    }, // 配置覆蓋率，在預處理的文件上加coverage

    coverageReporter: {
      type: 'html',  //能夠用其餘的好比text
      dir:  'coverage/'
    }, //配置覆蓋率報告的查看方式

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'], //在報告中使用coverage

啓動 karma start,會生成 coverage 文件夾,測試的覆蓋率就在裏面的 index.html 裏面,用瀏覽器打開

配合 webpack 測試 vue

引入 webpack

安裝 karma-webpack

npm install --save-dev karma-webpack

在 karma.conf.js 引用 webpack

const webpack = require("webpack");

而後加入 webpack 配置

const webpackConfig = require("./webpack.conf");

{
  ......
  webpack:webpackConfig
}

添加一個 src/hello.vue

<template>
  <div>
    <h1 id="hello">{{ text}}</h1>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: 'hello world'
      }
    }
  }
</script>

<style scoped>
</style>

而後添加 hello.test.js

import Vue from 'vue'
import hello from "../src/hello.vue";

describe('hello world', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(hello);
    const vm = new Constructor().$mount();
    expect(vm.$el.querySelector('#hello').textContent).toEqual('hello world');
  })
});

啓動測試

INFO: 'Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools'
INFO: 'You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html'
Chrome 72.0.3626 (Windows 10.0.0): Executed 1 of 1 SUCCESS (0.101 secs / 0.009 secs)
TOTAL: 1 SUCCESS

最後出現個 1 SUCCESS 說明成功了

如今進行 vue 開發使用腳手架已經能夠自帶測試工具,是 karma + mocha 的組合,還有另一個 jest(簡單易用,強,無敵)

Jasmine 入門（上） karma+webpack 搭建 vue 單元測試環境