vue 3.0 + vite + vue-test-unit + jest 尝鲜

在代码写完之后我们通常要对它进行单元测试，比如我们完成一个组件，我们要做的首先是对这个组件进行单位测试，看组件能否通过单元测试。今天尝试了在vite中引入VTU和jest。
首先，新建一个vite项目：
npm init vite-app learnJest
然后我们全局安装jest：
npm i -g jest
接下来安装jest、vtu、jest-vue、ts-jest、vue-jest等工具：
npm i @types/jest babel-jest @vue/test-utils@next @testing-library/jest-dom ts-jest vue-jest --save-dev
接下来的这一步比较重要，因为jest本身是本支持ES6的语法规则的，所以我们需要配置babel的presets让它支持es6的语法，否则回出现 SyntaxError: Cannot use import statement outside a module 这种错误。
配置babel的方法：在项目的根目录下新建一个 .babelrc 的文件,内容如下：

"presets" : [["@babel/preset-env", { "targets": { "node": "current" } }]]

接下来我们在根目录中配置 jest.config.js :

module.exports = {
	// 转义
    transform: {
      '^.+\\.vue$': 'vue-jest',
      '^.+\\js$': 'babel-jest',
      "^.+\\.(t|j)sx?$": "ts-jest"
    moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node']
1.对单独的文件进行测试
我们先在src下面新建一个__test__的目录，在这个目录下面新建一个简单的测试看看我这里取名文件add.ts和index.spec.ts。 

add.ts的内容如下：
export const add = (a: number, b: number) => a + b
index.spec.ts 

import { add } from "./add";
test("Index add fun", () => {
    const ret = add(1,2)
    console.log(ret)
    expect(ret).toBe(3)
然后我们就可以运行测试命令了：jest ./src/_tests_
不出意外应该看到测试通过：
2.对Vue的组件进行单元测试
我们在src目录下新建一个components目录，再在components目录中新建helloWorld目录然后在这个目录下新建helloWorld.vue文件，内容如下：
<template>
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello Jest',
</script>
然后再在这个目录下新建一个测试这个组件的__test__目录，目录下新建测试文件helloWorld.spec.js输入内容：
import { mount } from "@vue/test-utils";
import Hello from "../helloWorld.vue";
it('content', () => {
    const Comp = {
        template: `<div><Hello /></div>`
    const wrapper = mount(Comp, {
        global: {
            components: {
                Hello
    // 最简单的测试用例查看是否包含Hello Jest文字。
    expect(wrapper.findComponent({ name: 'HelloWorld' }).text()).toContain('Hello Jest')
运行测试：jest src/components/helloWorld不出意外应该是下面的结果：
以上就是Vue 3.0 + Vite的VTU体验了:GitHub的地址

最后还有一个坑：如何在ts文件中导入vue文件？这个问题还没解决，后续解决了会补上。