项目测试

单元测试=白盒测试（开发者）

黑盒测试=测试人员做的

新建vue项目
选择特性Unit Testing和E2E Testing
单元测试解决方案选择Jest
端到端测试解决方案选择Cypress

已有项目集成
vue add @vue/unit-jest
vue add @vue/e2e-cypress

新建test/unit/test.spec.js
*.spec.js是命名规范
运行测试
npm run test:unit(固定写法)
更多断言api看jest的官网

import {mount} from '@vue/test-utils'
import Kaikeba from '@/components/Kaikeba'

describe('测试Kaikeba组件', () => {
    it('mount之后测试data是开课吧', () => {
        const wrapper = mount(Kaikeba)
        expect(wrapper.find('span').text()).toBe('开课吧')
       
    })

    it('按钮点击之后', () => {
        const wrapper = mount(Kaikeba)
        wrapper.find('button').trigger('click')
        expect(wrapper.vm.message).toBe('按钮点击')
        expect(wrapper.find('span').html()).toBe('<span>按钮点击</span>')
       
    })
})

测试组件
创建components/kaikeba.vue

<template>
    <div>
    <span>{{ message }}</span>
    <button @click="changeMsg">点击</button>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        message: 'vue-text'
      }
    },
    created () {
      this.message = '开课吧'
    },
    methods:{
        changeMsg(){
            this.message = '按钮点击'
        }
    }
  }
</script>

创建tests/unit/kaikeba.spec.js

import {mount} from '@vue/test-utils'
import Kaikeba from '@/components/Kaikeba'

describe('测试Kaikeba组件', () => {
    it('mount之后测试data是开课吧', () => {
//挂载之后
        const wrapper = mount(Kaikeba)
        expect(wrapper.find('span').text()).toBe('开课吧')
       
    })

    it('按钮点击之后', () => {
        const wrapper = mount(Kaikeba)
//查找标签 模拟点击
        wrapper.find('button').trigger('click')
      //message属性的值是否等于
        expect(wrapper.vm.message).toBe('按钮点击')
//找元素的值
        expect(wrapper.find('span').html()).toBe('<span>按钮点击</span>')
       
    })
})

测试覆盖率
在jest.config.js
npm run test:unit
会生成一个coverage文件夹

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  "collectCoverage": true,
    "collectCoverageFrom": ["src/**/*.{js,vue}"]
}

E2E测试
运行npm run test:e2e