温故而知新：单元测试工具——JEST
包括：什么是单元测试、jest的基本配置、快照测试、mock函数、常用断言、前端单测策略等等。。

关于纯函数的测试，之前的文章讲的蛮多了，这次重点就不在这里了，感兴趣的同学请移步 温故而知新～🎉

虽然 Jest 可以对 React 组件进行测试，但不建议在组件上编写太多的测试，任何你想测试的内容，例如业务逻辑，还是建议从组件中独立出来放在单独的函数中进行函数测试，但测试一些 React 交互是很有必要的，例如要确保用户在单击某个按钮时是否正确地调用特定函数。

1. 准备工作——配置 🔧

下载 包：

同时，要在 里引入这个库的类型声明：

为了防止引入 css 文件报错：

在项目根目录下创建jest.config.js文件：

2. 开始测试——写用例 📝

先用小小的 button 试试水～

接下来是业务组件：

在测试的时候我们常常希望： 把接口mock掉，不真正地发送请求到后端，自定义接口返回的值。

1. Mock axios
这种方法可以在不同的测试用例中，根据我们的需要，来控制接口 data 的返回：

2. Mock API
另一种方法是 Mock测试文件中的接口函数：

3. Mock Http请求
我们可以不 Mock 任何函数实现，只对 Http 请求进行 Mock！先安装 msw：

🔧 msw 可以拦截指定的 Http 请求，有点类似 Mock.js，是做测试时一个非常强大好用的 Http Mock 工具。

需要说明一点，2.0.0以上的版本都是需要node>18的，由于不方便升级，我这里使用的是1.3.3版本（2024-03-15更新的，还是蛮新的哈）

如果你想在某个测试文件中想单独指定某个接口的 Mock 返回， 可以使用 server.use(mockHandler) 。

这里声明了一个 setup 函数，用于在每个用例前初始化 Http 请求的 Mock 返回。通过传不同值给 setup 就可以灵活模拟测试场景了。

如果我们需求中需要实现一个 Hook，那么我们要对 Hook 进行测试该怎么办呢？
🌰 举个例子：这里有一个useCounter，提供了增加、减少、设置和重置功能：

🙋那又有同学问了，我直接 Mock 掉这些 Hook 不就解决了？
❌ NoNoNo，假如除了 useState，还有 useEffect 这样的呢？ 难道每个 React API 都要 Mock 一遍吗？

👉 这里循序渐进列举了三种方法，更推荐第三种哦～

1. 写组件进行整体测试

首先写一个组件，然后在组件内使用 useCounter，并把增加、减少、设置和重置功能绑定到按钮：

在每个用例中，我们通过点击按钮来模拟函数的调用，最后 expect 一下 Counter：n 的文本结果来完成测试：

这个方法并不好，因为要用按钮来绑定一些操作并触发，可不可以直接操作函数呢？

2. 创建 setup 函数进行测试

我们不想一直和组件进行交互做测试，那么这个方法则只是借了 组件环境来生成一下 useCounter 结果， 用完就把别人抛弃了。

注意：由于setState 是一个异步逻辑，因此我们可以使用 @testing-library/react 提供的 act 里调用它。
act 可以确保回调里的异步逻辑走完再执行后续代码，详情可见官网这里

3. 使用 renderHook 测试
基于这样的想法，@testing-library/react-hooks 把上面的步骤封装成了一个公共函数 renderHook

注意：在 @testing-library/react@13.1.0 以上的版本已经把 renderHook 内置到里面了，这个版本需要和
react@18 一起使用。如果是旧版本，需要单独下载 @testing-library/react-hooks 包。

这里我使用新的版本，也就是内置的 renderHook：

实际上 renderHook 只是 setup 方法里 setupTestComponent 的高度封装而已。

如果测试组件和 React Router 做交互：

要创建 React Router 环境，我们可以使用 createMemoryHistory 这个 API：

1. test.only
使用场景：只想对单个测试用例进行调试时
在同一测试文件中，只有使用test.only的测试用例会被执行，其他测试用例则会被跳过。
举个例子🌰：（只有第二个测试用例会运行，第一个会被跳过，）

2. test.skip
使用场景：想跳过某个测试用例进行调试时
在同一测试文件中，使用test.skip的测试用例会被跳过，其他测试用例正常执行。
用法同 test.only 我就不写例子了