前言

记一次前端vue3的单元测试之Hello world，满足一下自己的晚期强迫症需求。

Note：本次环境为vue3 + typescript，使用jest作为测试工具，似乎和vite没啥关系。

1. 安装单元测试必要软件包

npm install -D babel jest @vue/test-utils @babel/preset-env @babel/preset-typescript @types/jest

2. 编写babel.config.cjs文件

文件路径为/项目根路径。.cjs指定commonJs 规范文件后缀

// babel.config.cjs
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript"
  ]
}

3. 根目录创建tests文件夹

ts测试文件指定后缀为.test.ts 或 .spec.ts

4. 创建helloworld.test.ts 测试文件

跟着vue3的官方单元测试get starting创建hello world测试文件

/**
 * @jest-environment jsdom
 */
// 上方注释是指定测试环境，否则报错document is not define
import { mount } from '@vue/test-utils'

const MessageComponent = {
  template: '<p>{{ msg }}</p>',
  props: ['msg']
}

test('displays message', () => {
  const wrapper = mount(MessageComponent, {
    props: {
      msg: 'Hello world'
    }
  })
  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('Hello world')
})

5.在package.json文件中添加script

{
	"script":{
        "test": "jest"
    }
}

6. 终端运行

npm run test

 # 运行结果
 PASS  tests/helloworld.spec.ts
  √ displays message (20 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.257 s
Ran all test suites.

7. 结束语

单元测试在一个小项目里看起来不重要，当工程愈来愈大时，单元测试的优势凸显而出。

hello world之后，接着研究jest vue/test-utils 文档，博客快餐永远是快餐，没有自己精心熬的粥好。

祝君学习愉快！