Vue3，咱们前端的新宠儿，添了好多新玩意儿。再加上TypeScript和Vite，开发就更加得心应手。要是想搞定Vue3+TS+Vite的项目，单元测试可不能忽视，它能帮我们查错找茬，确保项目稳如泰山。下面我就给大家分享几个单元测试的小技巧，希望能帮到你们。

为什么进行单元测试

平时编程总会碰到小烦恼，比如之前写的功能是不是没问题，或者组件显示得如何？光靠眼睛看，既费时又容易看走眼。然而，要是咱们编写个单元测试，以后修改起来就不怕出错，还可以方便地维护和升级程序。其实，单元测试就是衡量我们代码质量的一把标尺，对于项目研发来说，实在太重要

单元测试就像是小医生，帮咱们及早发现并解决代码错误，提高代码质量。有了它，修改代码时就放心多了，不会改坏原有的功能。而且，单元测试还是增进团队默契和减少聊天时间的神器；更厉害的是，它还可以当作说明文档，让人更好理解你的代码；最后，单元测试还能增强你的自信心，少花调试时间。

Jest框架介绍

额，其实Jest是Facebook搞出来的JavaScript测试神器，可以做单元测试、集成测试还有界面测试。咋地？速度快得飞起，功能多到数不过来。要是你用Vue3+TS+Vite搭建项目，那感觉简直不能再棒了。那儿有好多好玩意，比如断言库、快照测试、测试异步代码等等，真的是全能型测试工具

安装Jest

第一步，咱们得先安装上jest。npm或者yarn都行，然后加上个配置到package.json就成咯。上面的事情搞好了的话接下来咱们就可以开始编写第一个测试用例！

编写第一个测试

来，我们一起来搞定这个基础测试案例。首先创建一个名叫example.spec.ts的文件，然后把下面这些代码复制进去就可以了：

typescript
要用咱家的那个"add'函数，就在"../src/utils"这文件里。
test('addfunction',()=>{
expect(add(1,2)).toBe(3);
});

在这个小技巧里，咱们首先把函数‘add’加进去，然后用‘test’试着运算一下。先运行‘doAdd(1,2)’看它能否得出3，再用‘toBe’检验一下答案是否正确。

做完测试指令后，只要没问题，就能在屏幕上看得到通关提示！

npm install --save-dev jest

测试Vue组件

哈喽！你们应该听过，在做Vue项目时，Vue组件单元测试挺重要滴。这时候，VueTestUtils这货就能大显身手！首先，你得安装一下，再来就是准备好组件文件跟测试文件。

下面以一个简单的HelloWorld组件为例：

{
  "scripts": {
    "test": "jest"
  }
}

“`vue

{{msg}}

Clickme</button>

{{count}}

嘿哥们儿，别忘了这俩神器-Vue的defineComponent和ref方法！

import { add } from './example';
test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

这里是我们的组件定义，简单易懂。

props:{

msg:String,

},

setup(props){

constcount=ref(0);

npm run test

constincrement=()=>{

count.value++;

};

PASS ./example.spec.ts
✓ adds 1 + 2 to equal 3 (5ms)

return{

count,

increment,

接下来，就看你怎么把HelloWorld组件的单元测试文件HelloWorld.spec.ts搞定了！

开始！首先用import{mount}导入，然后用它来进行测试。

只需把’../src/components/HelloWorld.vue’加入你的项目就行。

咱们先聊聊怎么检查”HelloWorld.vue”？噢对了，咱们得先看看它能干啥子。

“，msg从父组件传过来的值渲染出来了！得测下效果”

constmsg=’newmessage’;

npm install --save-dev @vue/test-utils

上次给你的那个HelloWorld组件，现在要用到这个新的Mount方法里。

props:{msg},

});

期望包装器的文本跟消息吻合。

  

    
{{ msg }}
    

Click me

import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';
test('renders message and updates count when button is clicked', async () => {
  const wrapper = mount(HelloWorld, {
    props: {
      msg: 'Hello World',
    },
  });
  expect(wrapper.find('h1').text()).toEqual('Hello World');
  const button = wrapper.find('button');
  await button.trigger('click');
  expect(wrapper.find('h1').text()).toEqual('Hello World');
  expect(wrapper.vm.count).toBe(1);
});