vue/cli4 单元测试与覆盖率体系搭建

最新推荐文章于 2023-05-11 18:33:24 发布
最新推荐文章于 2023-05-11 18:33:24 发布
阅读量2.8k 收藏 7
点赞数 3
分类专栏： vue 文章标签： vue 单元测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39759115/article/details/106421132
版权

探索 vue-cli4 创建集成 mocha + chai 的项目中，如何写单元测试和查看单元测试覆盖率。

1、建立一个集成单元测试的项目

首先创建一个新的项目 vue-cli4-unit-mocha-chai-nyc：

vue create vue-cli4-unit-mocha-chai-nyc

# 选择手动配置
? Please pick a preset: 
  zcloud (router, vuex, less, babel, eslint, unit-jest) 
  default (babel, eslint) 
❯ Manually select features 

# 选择需要的功能
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing

# 使用 history 模式
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

# scss
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus   

# esLint
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier 

# 保存时进行检测
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
 
 # 单元测试 mocha + chai
 ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai 
  Jest 
  
  # 端到端测试
  ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (WebDriver-based) 

# 单独的配置文件
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? 
❯ In dedicated config files 
  In package.json 

# 不保存配置
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

# 开始创建项目
Vue CLI v4.1.2
✨  Creating project in /Users/heyi/File/Front-End/demo/vue-unit.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

···

📄  Generating README.md...

🎉  Successfully created project vue-cli4-unit-mocha-chai-nyc.
👉  Get started with the following commands:

 $ cd vue-cli4-unit-mocha-chai-nyc
 $ npm run serve

asd
创建项目完成后，可以发现 cli4 会自动生成一个默认的单元测试例子 tests/unit/ example.spec.js，其内容如下：

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })
})

接下来，进入项目并运行单元测试：

cd vue-cli4-unit-mocha-chai-nyc
npm run test:unit

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> vue-cli-service test:unit

 WEBPACK  Compiling...

  [===                      ] 10% (building)Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
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
  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 3019ms

  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 3019ms

 MOCHA  Testing...



  HelloWorld.vue
    ✓ renders props.msg when passed


  1 passing (26ms)

 MOCHA  Tests completed successfully

npm run test:unit 命令会自动读取 tests/unit/ 目录下的 *.spec.js 文件，来跑我们的单元测试。

可以发现，通过 vue-cli4 创建集成的单元测试项目，已经可以让我们做到零配置来写单元测试了。接下来就动手写一个单元测试试试。

2、动手写第一个单元测试


首先我们在 src/components/ 目录下创建文件 AppEmpty.vue，其内容如下:

<template>
  <div>{{text}}</div>
</template>

<script>
export default {
  name: 'AppEmpty',
  props: {
    text: {
      type: String,
      default: 'no data'
    }
  },
  data () {
    return {}
  }
}
</script>

<style scoped lang="scss">
</style>


接着在 tests/unit/ 目录下创建 app-empty.spec.js 文件，并添加如下内容：

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import AppEmpty from '@/components/AppEmpty.vue'

describe('AppEmpty.vue', () => {
  it('no props.text when passed', () => {
    const wrapper = shallowMount(AppEmpty)
    expect(wrapper.text()).to.include('no data')
  })

  it('renders props.text when passed', () => {
    const text = '暂无数据'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { text }
    })
    expect(wrapper.text()).to.include(text)
  })
})


最后，再次运行 test:unit 命令：

npm run test:unit

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> vue-cli-service test:unit

 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 1935ms

  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 1935ms

 MOCHA  Testing...



  AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed

  HelloWorld.vue
    ✓ renders props.msg when passed


  3 passing (35ms)

 MOCHA  Tests completed successfully


可以看到，我们自己写的单元测试也跑了起来。

3、单元测试文件书写位置调整


如果所有的 *.spec.js 文件都写在 tests/unit/ 目录下会显得很凌乱，那么如果我们在 /unit 目录下再新建文件夹，会被读取到吗？答案是肯定的。


在 tests/unit/ 目录下新建一个 components 文件夹，把刚刚创建的 app-empty.spec.js 文件移进去。再次运行 test:unit 命令：

npm run test:unit

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> vue-cli-service test:unit

 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 2035ms

  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 2035ms

 MOCHA  Testing...



  HelloWorld.vue
    ✓ renders props.msg when passed

  AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed


  3 passing (57ms)

 MOCHA  Tests completed successfully


说明我们是可以自己建立文件夹进行整理我们的单元测试文件的。


如果我们的项目是一个去中心化的架构，我们可能希望我们的单元测试文件位于我们的组件旁边，而不是都写在 tests/unit/ 目录下。


如何实现呢？


在 tests/unit 目录下新建 index.spec.js 文件，其内容如下：

// require all src files that ends with .spec.js
const srcContext = require.context('../../src/', true, /\.spec.js$/)
srcContext.keys().forEach(srcContext)


就可以在 src/ 目录下任何位置写我们的单元测试文件了。


为了验证所言非虚，简单的验证一下。复制 tests/unit/components/app-empty.spec.js 文件，在 src/components/ 目录下粘贴，然后稍稍修改一下测试套件的文本：

- describe('AppEmpty.vue', () => {
+ describe('src/**/*.spec.js AppEmpty.vue', () => {


再次运行 test:unit 命令：

npm run test:unit

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> vue-cli-service test:unit

 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 1968ms

  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 1968ms

 MOCHA  Testing...



  HelloWorld.vue
    ✓ renders props.msg when passed

  src/**/*.spec.js AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed

  AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed


  5 passing (38ms)

 MOCHA  Tests completed successfully


嗯，所言不虚。

4、使用 mochawesome 输出结果


到目前为止，我们的测试报告都是在命令行展示，那么如果我们想要把结果输出并展示在页面上如何做到呢？


首先在项目中安装 mochawesome：

npm install --save-dev mochawesome


然后在 package.json 中修改 test:unit 命令如下：

"test:unit": "vue-cli-service test:unit --reporter=mochawesome",


然后再次执行：

npm run test:unit                      

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> vue-cli-service test:unit --reporter=mochawesome

 WEBPACK  Compiling...

  [===                      ] 10% (building)Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
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
  [=========================] 98% (after emitting)

 WARNING  Compiled with 1 warnings

 warning  in ./src/components/app-empty.spec.js

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/src/components/app-empty.spec.js
   5:1  error  'describe' is not defined  no-undef
   6:3  error  'it' is not defined        no-undef
  11:3  error  'it' is not defined        no-undef

✖ 3 problems (3 errors, 0 warnings)


 @ ./src sync \.spec.js$
 @ ./tests/unit/index.spec.js
 @ ./node_modules/mochapack/lib/entry.js

  [=========================] 100% (completed)

 WEBPACK  Compiled with 1 warning(s)

Warning in ./src/components/app-empty.spec.js

  Module Error (from ./node_modules/eslint-loader/index.js):
  
  /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/src/components/app-empty.spec.js
     5:1  error  'describe' is not defined  no-undef
     6:3  error  'it' is not defined        no-undef
    11:3  error  'it' is not defined        no-undef
  
  ✖ 3 problems (3 errors, 0 warnings)
  

 MOCHA  Testing...



  HelloWorld.vue
    ✓ renders props.msg when passed

  src/**/*.spec.js AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed

  AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed


  5 passing (35ms)

[mochawesome] Report JSON saved to /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/mochawesome-report/mochawesome.json

[mochawesome] Report HTML saved to /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/mochawesome-report/mochawesome.html


非常醒目的警告提示首先被发现：

 WEBPACK  Compiled with 1 warning(s)

Warning in ./src/components/app-empty.spec.js

  Module Error (from ./node_modules/eslint-loader/index.js):
  
  /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/src/components/app-empty.spec.js
     5:1  error  'describe' is not defined  no-undef
     6:3  error  'it' is not defined        no-undef
    11:3  error  'it' is not defined        no-undef
  
  ✖ 3 problems (3 errors, 0 warnings)


告诉我们在 ./src/components/app-empty.spec.js 文件中 describe、it 未定义，为什么上面我们执行的时候都没有这个警告，这次就有了呢？而且，为什么只有 src/ 目录下的单元测试文件报了，tests/unit/ 目录下的没有报呢？


答案在项目的 .eslintrc.js 配置文件里：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/src/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        mocha: true
      }
    }
  ]
}


在项目生成的 eslint 配置文件中，存在针对特定文件的配置，具体理解不细说，只需要简单的在其中加入 src/ 的配置即可：

···

  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
+       '**/tests/unit/**/*.spec.{j,t}s?(x)',
        '**/src/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        mocha: true
      }
    }
  ]
  
···


接下来我们再次运行 test:unit 命令，上面出现的告警将不复存在：

npm run test:unit

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> vue-cli-service test:unit --reporter=mochawesome

 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 1212ms

  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 1212ms

 MOCHA  Testing...



  HelloWorld.vue
    ✓ renders props.msg when passed

  src/**/*.spec.js AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed

  AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed


  5 passing (36ms)

[mochawesome] Report JSON saved to /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/mochawesome-report/mochawesome.json

[mochawesome] Report HTML saved to /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/mochawesome-report/mochawesome.html

 MOCHA  Tests completed successfully


处理了告警问题，回到最初的目的。


命令执行完成后，会在项目根目录下增加一个名为 mochawesome-report 的文件夹，里面就放着输出的单元测试报告。


我们在浏览器打开 mochawesome.html 可以看到如下页面：



单元测试写了，测试报告也有了，接下来就差扫描项目单元测试覆盖率了。

5、使用 nyc 扫描测试覆盖率


文档地址：https://istanbul.js.org/


项目地址：https://github.com/istanbuljs/nyc


首先，在项目中安装所需依赖：

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


接着在项目根目录下新建 nyc.config.js 文件，其内容如下：

// 探索istanbul/nyc代码覆盖工具的原理 https://zhuanlan.zhihu.com/p/88524418
module.exports = {
  'check-coverage': true,
  'per-file': true,
  'lines': 0,
  'statements': 0,
  'functions': 0,
  'branches': 0,
  'include': [
    'src/**/*.js',
    'src/**/*.vue'
  ],
  'exclude': [
    'src/abandon-ui/**',
    'src/*.js',
    '**/*.spec.js'
  ],
  'reporter': [
    'lcov',
    'text',
    'text-summary'
  ],
  'extension': [
    '.js',
    '.vue'
  ],
  'cache': true,
  'all': true
}


完成后，在项目根目录新建 vue.config.js, 其内容如下：

const path = require('path')
const testMode = process.env.NODE_ENV === 'test'

module.exports = {
  lintOnSave: false,
  productionSourceMap: false,

  chainWebpack: config => {

    if (testMode) {
      config.merge({
        devtool: 'eval'
      })
      config.module
        .rule('istanbul')
        .test(/\.(js|vue)$/)
        .include
        .add(path.resolve(__dirname, '/src'))
        .end()
        .use('istanbul-instrumenter-loader')
        .loader('istanbul-instrumenter-loader')
        .options({ esModules: true })
        .before('babel-loader')
    }
  }
}


完成后，打开项目根目录下的 babel.config.js 文件，修改如下：

+ const testMode = process.env.NODE_ENV === 'test'
+
  module.exports = {
-   presets: ['@vue/cli-plugin-babel/preset']
+   presets: ['@vue/cli-plugin-babel/preset'],
+   plugins: testMode ? ['babel-plugin-istanbul'] : []
  }


最后，打开 package.json 文件，修改 test:unit 命令：

-    "test:unit": "vue-cli-service test:unit --reporter=mochawesome",
+    "test:unit": "nyc vue-cli-service test:unit --reporter=mochawesome",


再次执行新的 test:unit 命令：

npm run test:unit

> vue-cli4-unit-mocha-chai-nyc@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc
> nyc vue-cli-service test:unit --reporter=mochawesome

 WEBPACK  Compiling...

  [===                      ] 10% (building)Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
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
  [=========================] 98% (after emitting)

 DONE  Compiled successfully in 2210ms

  [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 2210ms

 MOCHA  Testing...



  HelloWorld.vue
    ✓ renders props.msg when passed (41ms)

  src/**/*.spec.js AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed

  AppEmpty.vue
    ✓ no props.text when passed
    ✓ renders props.text when passed


  5 passing (72ms)

[mochawesome] Report JSON saved to /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/mochawesome-report/mochawesome.json

[mochawesome] Report HTML saved to /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-nyc/mochawesome-report/mochawesome.html

 MOCHA  Tests completed successfully

-----------------|---------|----------|---------|---------|-------------------
File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------------|---------|----------|---------|---------|-------------------
All files        |   16.67 |      100 |      50 |   16.67 |                   
 components      |     100 |      100 |     100 |     100 |                   
  AppEmpty.vue   |     100 |      100 |     100 |     100 |                   
  HelloWorld.vue |       0 |        0 |       0 |       0 |                   
 router          |       0 |      100 |       0 |       0 |                   
  index.js       |       0 |      100 |       0 |       0 | 5-23              
 store           |       0 |      100 |     100 |       0 |                   
  index.js       |       0 |      100 |     100 |       0 | 4                 
-----------------|---------|----------|---------|---------|-------------------

=============================== Coverage summary ===============================
Statements   : 16.67% ( 1/6 )
Branches     : 100% ( 0/0 )
Functions    : 50% ( 1/2 )
Lines        : 16.67% ( 1/6 )
================================================================================


执行成功后会发现根目录下除了新增加的 mochawesome-report/ 目录，还多了 coverage/ 和 .nyc_output/ 目录，我们的覆盖率结果就输出在 coverage/ 目录下。


在浏览器打开 coverage/ 目录下的 index.html 文件会出现以下页面：



单击页面上的 components 可以看到改目录下的详细 .vue 文件覆盖率情况：



再次单击 AppEmpty.vue 可以看到文件文件内的覆盖情况：



最后列出 package.json 文件，以做参考：

{
  "name": "vue-cli4-unit-mocha-chai-nyc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "nyc vue-cli-service test:unit --reporter=mochawesome",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-e2e-cypress": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-plugin-router": "^4.4.0",
    "@vue/cli-plugin-unit-mocha": "^4.4.0",
    "@vue/cli-plugin-vuex": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "babel-plugin-istanbul": "^6.0.0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "istanbul-instrumenter-loader": "^3.0.1",
    "mochawesome": "^6.1.1",
    "node-sass": "^4.12.0",
    "nyc": "^15.0.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

6、使用 karma 扫描测试覆盖率


扫描测试覆盖率的另一个方法是使用 karma。


官网：http://karma-runner.github.io/latest/index.html


在前面的 1-5 节部分，所有的内容都是在第 1 节建立的项目 vue-cli4-unit-mocha-chai-nyc 中依次完成的。在本节内容开始之前，需要按照第 1 节的内容，重新创建一个项目：vue-cli4-unit-mocha-chai-karma 。


首先，依旧是安装需要的依赖：

npm i --save-dev karma karma-mocha mocha karma-chai \
karma-webpack karma-chrome-launcher karma-sourcemap-loader karma-spec-reporter \
karma-coverage@1.1.2 babel-plugin-istanbul@5.1.4 cross-env


在项目根目录创建 karma.conf.js 文件，其内容如下：

const webpackConfig = require('@vue/cli-service/webpack.config.js')

module.exports = function (config) {
  config.set({
    frameworks: ['mocha'],

    files: [
      'tests/**/*.spec.js'
    ],

    preprocessors: {
      '**/*.spec.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    reporters: ['spec', 'coverage'],
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },

    autoWatch: true,

    browsers: ['ChromeHeadless']
  })
}


然后，修改 babel.config.js 文件：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
+ env: {
+   test: {
+     plugins: ["istanbul"]
+ 	}
+ }
}


接着，修改 package.json 文件的 test:unit 命令为：

"test:unit": "cross-env NODE_ENV=test karma start --single-run",


关于这里使用 BABEL_ENV=test 还是 NODE_ENV=test，建议是 NODE_ENV=test。

Karma can’t handle split chunks.

  • In @vue/cli-service v3, unless you explicitly set NODE_ENV to production, splitChunks won’t be turned on.
  • In @vue/cli-service v4, unless you explicitly set NODE_ENV to test, splitChunks will be turned on by default.

It is a good practice to always set NODE_ENV to test during unit testing because many of the packages in Node.js ecosystem follows this convention.

Actually, with NODE_ENV=test, you can skip BABEL_ENV=test because it will default to NODE_ENV.


最后，我们执行 test:unit 命令：

npm run test:unit                                    

> vue-cli4-unit-mocha-chai-karma@0.1.0 test:unit /Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-karma
> cross-env NODE_ENV=test karma start --single-run



 DONE  Compiled successfully in 671ms

ℹ ｢wdm｣: Hash: f44d39181b90d9235a4b
Version: webpack 4.43.0
Time: 671ms
Built at: 2020-05-29 09:55:03
                                                                                                 Asset       Size                   Chunks             Chunk Names
../../../../../../Users/heyi/File/Front-End/demo/_unit/vue-cli4-unit-mocha-chai-karma/dist/favicon.ico   4.19 KiB                           [emitted]  
                                                                                                app.js   1.22 MiB                      app  [emitted]  app
                                                                                 img/logo.82b9c7a5.png   6.69 KiB                           [emitted]  
                                                                                            index.html  889 bytes                           [emitted]  
                                                                            tests/unit/example.spec.js    3.1 MiB  tests/unit/example.spec  [emitted]  tests/unit/example.spec
Entrypoint app = app.js
Entrypoint tests/unit/example.spec = tests/unit/example.spec.js
[0] multi ./src/main.js 28 bytes {app}
[./node_modules/@babel/runtime/helpers/interopRequireDefault.js] 147 bytes {app} {tests/unit/example.spec} [built]
[./node_modules/@vue/test-utils/dist/vue-test-utils.js] 400 KiB {tests/unit/example.spec} [built]
[./node_modules/chai/index.js] 40 bytes {tests/unit/example.spec} [built]
[./node_modules/chai/lib/chai.js] 1.23 KiB {tests/unit/example.spec} [built]
[./node_modules/vue-loader/lib/runtime/componentNormalizer.js] 2.71 KiB {app} {tests/unit/example.spec} [built]
[./node_modules/vue-template-compiler/index.js] 865 bytes {tests/unit/example.spec} [built]
[./node_modules/vue/dist/vue.runtime.esm.js] 222 KiB {app} {tests/unit/example.spec} [built]
[./src/App.vue] 566 bytes {app} [built]
[./src/components/HelloWorld.vue] 599 bytes {app} {tests/unit/example.spec} [built]
[./src/components/HelloWorld.vue?vue&type=script&lang=js&] 576 bytes {app} {tests/unit/example.spec}
[./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true&] 427 bytes {app} {tests/unit/example.spec}
[./src/main.js] 2.38 KiB {app} [built]
[./src/router/index.js] 3.23 KiB {app} [built]
[./tests/unit/example.spec.js] 3.27 KiB {tests/unit/example.spec} [built]
    + 160 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  534 KiB       1  
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 928 bytes {1} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {1} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {1} [built]
ℹ ｢wdm｣: Compiled successfully.
29 05 2020 09:55:03.205:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
29 05 2020 09:55:03.207:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
29 05 2020 09:55:03.231:INFO [launcher]: Starting browser ChromeHeadless
29 05 2020 09:55:03.790:INFO [Chrome Headless 83.0.4103.61 (Mac OS 10.14.6)]: Connected on socket WTpGcR9Fum14KL6rAAAA with id 16752070

  HelloWorld.vue
    ✓ renders props.msg when passed

Chrome Headless 83.0.4103.61 (Mac OS 10.14.6): Executed 1 of 1 SUCCESS (0.012 secs / 0.009 secs)
TOTAL: 1 SUCCESS


=============================== Coverage summary ===============================
Statements   : 100% ( 6/6 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 3/3 )
Lines        : 100% ( 6/6 )
================================================================================


执行成功后会在项目根目录下生成 coverage/** 文件夹，放着输出的测试覆盖率，我们在浏览器打开 coverage/lcov-report/index.html 文件，其页面如下：



与使用 nyc 输出的页面一样，也可以单击列表的 src/components/ 查看该目录下的详细文件：





查看 HelloWorld.vue 文件详情：





由于在写这篇记录的时候，发现存在依赖（karma-coverage、babel-plugin-istanbul）不能直接安装最新版本，下面列出完整的 package.json 文件，以做参考：

{
  "name": "vue-cli4-unit-mocha-chai-karma",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "cross-env NODE_ENV=test karma start --single-run",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-e2e-cypress": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-plugin-router": "^4.4.0",
    "@vue/cli-plugin-unit-mocha": "^4.4.0",
    "@vue/cli-plugin-vuex": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "babel-plugin-istanbul": "^5.1.4",
    "chai": "^4.1.2",
    "cross-env": "^7.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "karma": "^5.0.9",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "^1.1.2",
    "karma-mocha": "^2.0.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.32",
    "karma-webpack": "^4.0.2",
    "mocha": "^7.2.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}


使用 karma 其它常用依赖：

chai-spies karma-chai-spies \
sinon sinon-chai karma-sinon-chai
_let
关注
专栏目录
Vue前端架构单元测试与代码覆盖率详解
BrchCpp的博客
09-24 418
通过本文的介绍，我们了解了如何从零开始为Vue前端架构编写单元测试，并测量代码的覆盖率。首先，我们使用Vue CLI初始化了一个新的Vue项目，并安装了Jest和vue-test-utils作为测试工具。然后，我们编写了一个简单的测试用例示例，对HelloWorld组件进行了断言。最后，我们使用Jest生成了代码覆盖率报告，以评估测试的完整性。单元测试和代码覆盖率是前端开发中至关重要的环节，它们能够帮助我们及早发现和修复潜在的问题，提高代码质量和可维护性。
vue/cli4搭建配置脚手架
weixin_43561129的博客
04-27 899
vue/cli4搭建和配置evServer1.老版本vue/cli删除(直接创建新版本即可)2.vue/cli3 想要升级到 vue/cli43.创建vue/cli@4.03.1 选择你的配置项（配置完成以后可以记录自己的配置选择，方便以后创建）3.2 选择是否使用history router3.3 选择个人喜欢的css预处理器3.4 选择Eslint代码验证规则3.5 选择什么时候进行代码规则检...
在vue框架中配置测试覆盖率
阿嚏乱码的地方
07-04 2597
什么是测试覆盖率 这个要从测试的流派说起了，测试分为黑盒测试（不知道代码如何写的）、白盒测试（知道代码是如何写的）。 测试人员通常进行黑盒测试，在集成环境下参照写好的测试用例，用鼠标点点点跑流程。按测试代码的颗粒度来划分，也可以叫集成测试，属于最大颗粒度的测试。 而开发人员对自己的代码进行测试，叫做白盒测试，一般是单元测试，属于是最小颗粒度的测试，对函数进行断言。 对一个项目来说最好是既要有黑盒测试（人肉测试）又要有白盒测试（机器测试，代码测代码）。 而测试覆盖率指的就是通过写单元测试测试项目代码
从零开始做Vue前端架构（6）单元测试 & 代码覆盖率
weixin_33910385的博客
04-23 843
新的一年 之前因为上家公司的经营出了问题，年前的大裁员，过了一个漫长的春节。之后加入了新公司，然后正好赶上一个很紧急的项目，忙成狗，因此好久没更新文章了。不过，我又回来啦！ 前言 自动化测试，我们将使用karma和nightmare，内容会包括： 单元测试 e2e测试（放下一篇文章） 其实，单元测试一般用在写公共包的时候，比如通用的j...
webpack手动搭建vue项目（七）—— 单元测试覆盖率
weixin_42735794的博客
05-15 532
1.安装依赖 >npm installkarma-coveragecross-envbabel-plugin-istanbul --save-dev 2.更新你的.babelrc文件 添加如下： "env": { "test": { "plugins": ["istanbul"] } } 3.更新karma.conf.js module.expo...
【测试与自动化】介绍-框架-Jest-覆盖率-异步代码-e2e-Vue测试
Write less，do more
11-09 1722
什么是软件测试？定义：目的：本质：常用测试方法：黑盒测试：主要以用户的视角来测试程序的功能，所以也称功能测试白盒测试：主要测试程序的代码逻辑，所以也称代码测试什么是自动化测试？早先的软件测试工作大都由人来手工完成，其过程极度重复、枯燥、易出错。而自动化测试则利用程序来模拟人工操作，有效规避了以上问题。自动化测试的分类：单元测试：属于一种白盒测试，即编写代码来对项目中的小部件代码进行测试（比如一个函数）集成测试：属于一种白盒测试，即在单元测试基础上，将模块按设计要求组装为子系统或完整系统进行测试e2e测试：属
vue2单元测试环境搭建
08-27
Vue2单元测试环境的搭建是开发过程中的重要环节，它能确保代码的质量和稳定性。以下是一份详细的步骤指南，帮助你构建Vue2项目的单元测试环境。 首先，你需要一个已有的Vue2项目，如果项目尚未创建，你可以使用`vue...
Vue-cli3 Jest单元测试
MikeZhang93的博客
05-06 1731
本文介绍： 1、初始化未选择安装test模块的vue-cli3项目下jest环境的搭建 2、vue组件基本的测试方法 1.环境配置 1.1安装Test-unit依赖 npm install --save-dev @vue/test-utils 1.2安装Jest依赖 vue add @vue/cli-plugin-unit-jest 1.3安装babel-jest、vue-jest和babel...
vue-cli3.0项目搭建，项目结构和配置
Coderbook的博客
10-19 1044
这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。 一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件： CLI：@vue/cli全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令） CLI 服务：@vue/cli-service是一个开发环境依赖。构建于webpack和webpack-dev-server之上（提供 如：serve、build和...
前端vue单元测试环境搭建（二）
qq_33024515的博客
06-30 5758
文章目录前端vue单元测试环境搭建开始创建带有mocha的vue项目运行测试文件目录执行测试注意完善vue-cli提供的测试配置@vue/cli-plugin-unit-mocha提供的命令配置mocha-webpack.opts集成插件/工具Sinon介绍安装@vue/test-utils为我们的测试结果提供漂亮的图表支持：mochawesomenyc/Istanbul介绍安装使用配置配合在vu...
istanbul-reporter-badges:Instanbul覆盖率报告程序，可为代码覆盖率指标生成徽章
05-01
用于Instanbul代码覆盖的徽章 用于Instanbul覆盖率的Reporter，可为代码覆盖率指标生成徽章并将其附加到README.md文件中。 例子 承保范围摘要： 用法 npm install istanbul-reporter-badges --save-dev 然后将istanbul-reporter-badges添加istanbul-reporter-badges列表中。
vue/cli4,配置test测试环境,并通过全局控制变量管理地址
weixin_50061893的博客
08-09 921
文章目录前言一、创建.env.test文件二、在packge.json中创建一个打包模式test三、修改vue.config.js配置四、运行测试环境五、完成效果5.1测试环境5.2开发环境六、注意事项总结 前言 由于公司项目较小,所以项目的管理比较随意,之前都是直接通过本地打包npm run build 打包后的文件发送给测试就测,最近对接一个单点登录,需要配置回调地址,地址的格式是本地的端口,这就造成了需要配置三个地址,我的本地(开发用),测试本地(测试用),服务器线上(正式环境)。然后每次打包给测试
Vue 全家桶单元测试简要指南
网易数帆社区博客
11-05 526
此文已由作者张汉锐授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。vue 的单元测试环境按照目前全家桶的情况，是需要 webpack 的支持的。可以直接使用 vue-cli ，选择 webpack 模版，里面会有完整的单元测试 &amp; 端对端测试的配置。如果想要自己配置，则在配置完基本的 karma 测试环境之后，将 webpack 加入到 preprocessor 上。...
第十六章 品质保证：发布覆盖率测试报告
天界程序员的博客
12-04 1149
代码覆盖率才是评价一个项目品质的标准。在挑选一个项目的时候，有经验的使用者都会根据代码覆盖率来确定代码的可靠性。虽然自动化测试工具可以自动验证代码的正确性，但是如果只有部分代码经过了测试，或者只是简单地跑通了代码，也不能说是一个合格的代码。比如组件库只测试一部分的组件，或者每个组件只测试了默认设置。譬如，按钮中某个属性或者某几个属性间的排列组合并没有得到测试，这样的测试还不能保证组件库的功能完全正确。那么如何来客观评价这个测试的完备程度呢？
Vue Test Utils前端单元测试
最新发布
ch_jia_jia的博客
05-11 1312
Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具。可见无论是受欢迎度和写法上，Jest 都有很大的优势，因此推荐使用开箱即用的 Jest。Jest 默认支持断言，同时默认支持覆盖率测试。
[译] Vue 应用的代码覆盖率
tonylua的博客
09-08 1222
原文地址：https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/原文作者：Gleb Bahmutov译文出自：...
mocha 测试 mysql_mocha 的基本用法 & istanbul 生成测试覆盖率报告 & mockjs 模拟网络请求...
weixin_32098457的博客
01-27 172
补充：cnpm i mocha -g --save-devcnpm i chai --save-dev //这个是可选的断言库，也可以用shouldcnpm imochawesome --save-dev //这个是mocha以外的一个报告格式库，也是可选的[这里cnpm 也可以用yarn，总之是比npm 工具好用]配置好了，直接在根目录下运行：mocha 就可以,最简单的：mocha xx.t...
el-dialog 遮罩层覆盖内容的问题
weixin_53474595的博客
02-16 547
做项目的时候用了el-dialog,发现弹窗内容也被遮罩层给覆盖了，用z-index设置也没有用。解决方法：:append-to-body="true"，加上这个终于可以了。
Vue2 应用测试学习 03 - TDD 案例（其他测试用例、快照测试、配置代码覆盖率统计、codecov 上传覆盖率统计报告、Github Actions 自动化测试和持续集成）
皮蛋很白的博客
03-28 604
TodoApp 切换全选 点击全选按钮，修改全部任务项的状态，并且按钮的样式随着全部任务项的选中状态改变。 编写测试用例 test('Toggle All', async () => { const toggleAll = wrapper.findComponent('input[data-testid="toggle-all"]') // 选中全选按钮 await toggleAll.setChecked() // 断言所有的任务都被选中 wrapper.vm.todos.f
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值