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_
不出意外应该看到测试通过：

image

2.对Vue的组件进行单元测试

我们在src目录下新建一个components目录，再在components目录中新建helloWorld目录然后在这个目录下新建helloWorld.vue文件，内容如下：

然后再在这个目录下新建一个测试这个组件的__test__目录，目录下新建测试文件helloWorld.spec.js输入内容：

import { mount } from "@vue/test-utils";
import Hello from "../helloWorld.vue";

it('content', () => {
    const Comp = {
        template: `
`
    }
    const wrapper = mount(Comp, {
        global: {
            components: {
                Hello
            }
        }
    })
    // 最简单的测试用例查看是否包含Hello Jest文字。
    expect(wrapper.findComponent({ name: 'HelloWorld' }).text()).toContain('Hello Jest')
})

运行测试：jest src/components/helloWorld不出意外应该是下面的结果：

image

以上就是Vue 3.0 + Vite的VTU体验了
GitHub的地址