react + vite +testing-library 构建单元测试

业务复杂多变迭代快速，加上编写单测其实是耗费一定时间去做的，可能很多人认为编写单元测试是一件吃力不讨好的事儿，不会在项目中主动的去做单元测试，一两年前笔者也是这样的一种心态，对于单测嗤之以鼻，但是随着看的书多了，学习的东西多了，明白了单测可有有效的保证我们一些核心功能的正确性，同样可以反推我们的设计一些通用功能是否全面，再者也可以在我们改动一些功能后，校验原有功能的正确性，说这么多，还需要大家自己写起来单测，一个东西好不好，只有用起来了才知道，在vite下配置jest单测代码一上传至git，有兴趣的朋友，可以点此查阅;

(1)、测试项目准备

  如果我们通过creat-react-app创建项目会直接内置@testing-library/react，可以开箱即用，但是这里我们通过vite方式创建的react项目，vite构建的项目，默认是没有单测的，然后一步步完善test构建，这样做的好处呢就是我们自己熟悉配置构建流程，脱离cli脚手架工具，自由搭配；

• 1、使用vite创建一个空白项目pnpm create vite react-test-example -- --template react-ts
• 2、安装react单测相关依赖pnpm add @testing-library/react @testing-library/jest-dom jest -D
• 3、pnpm jest --init生成jest配置文件

  下面我们就对于配置项目做个说明

• 第一：我们先设置匹配那些文件作为test文件

testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{spec,test}.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
    '<rootDir>/__test__/**/*.{spec,test}.{js,jsx,ts,tsx}',
],

• 第二步：配置项目单测文件类型配置，注意这个配置内容是从左到右执行去检查匹配的，所以如果是ts主导的项目，我们就将ts类型文件放在最前面；

moduleFileExtensions: [
    'ts', 'tsx', 'js&#