vue3.0单文件组件单元测试试水

初始化一个项目

1. 创建一个文件夹，用npm init -y初始化一个项目
2. 创建一个简易的项目结构，如下图所示

环境准备

一、安装依赖

方式一：

1. 在package.json中键入如下内容

2. npm install统一安装

方式二：使用命令依次安装，下面只展示部分安装依赖步骤

// 单元测试所需依赖
npm install jest@26.6.3 babel-jest@26.6.3 @vue/test-utils@next vue-jest@next -D

安装babel桥接

npm install babel-core@bridge -D

二、设置配置文件

babel.config.js

module.exports = {
    presets: ['@babel/preset-env']
}

jest.config.js

module.exports = {
    "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
    "transform": {
        ".*\\.vue$": "vue-jest", // *.vue文件用vue-jest处理
        ".*\\.js$": "babel-jest" // *.js文件用babel-jest处理
    },
    "moduleFileExtensions": [ // 告诉jest要处理哪些格式的文件
        "js",
        "vue"
    ]
}

给package.json增加一个test脚本

scripts: {
    "test": "jest"
}

三、编写vue单文件组件样例

// Jest.vue
<template>
  <div class=''>
    <p>{{counter}}</p>
    <button @click="add">累加</button>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: "Jest",
  setup(){
    let counter = ref(0);
    function add() {
      counter.value++;
    }
    return {
      counter,
      add
    }
  }
}
</script>

四、编写单元测试用例

// jest.test.js
import 'regenerator-runtime/runtime' // 解决ReferenceError: regeneratorRuntime is not defined问题
import Jest from '../src/Jest.vue';
import { shallowMount } from '@vue/test-utils';
describe("test jest",() => {
  test('trigger',async () => {
    const wrapper = shallowMount(Jest);
    await wrapper.find("button").trigger("click");
    expect(wrapper.find("p").text()).toBe("1");
    await wrapper.find("button").trigger("click");
    expect(wrapper.find("p").text()).toBe("2");
  })
})

运行测试用例

npm test

结果如下，即为成功

运行测试用例遇到的问题

1. 各个依赖包版本不一致导致的测试用例不能执行
2. ReferenceError: regeneratorRuntime is not defined

解决办法

1. 保持jest、vue-jest、babel-jest版本一致
2. 安装regenerator-runtime依赖，npm install regenerator-runtime -D,并在测试用例文件中导入依赖import 'regenerator-runtime/runtime'