Vue项目覆盖率展示

最新推荐文章于 2023-05-11 18:33:24 发布

April_CuiCui

最新推荐文章于 2023-05-11 18:33:24 发布

阅读量1.2k

点赞数 2

文章标签：单元测试 vue vue.js node.js

本文链接：https://blog.csdn.net/EWJRQKJRQ/article/details/111914906

版权

本文介绍了如何在Vue项目中设置单元测试，包括创建测试、调整文件位置、使用mochawesome输出测试报告以及通过nyc和karma扫描测试覆盖率。详细步骤从创建Vue CLI项目开始，涵盖测试编写、配置文件修改以及生成的测试报告和覆盖率报告的查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

建立一个集成了单元测试的Vue项目

创建一个vue-cli项目

  vue create mytestdemo
  
  # 选择手动配置
  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

创建项目完成后，可以发现 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 mytestdemo
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 文件，来跑我们的单元测试。

手写单元测试

首先我们在 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', (

最低0.47元/天解锁文章