思路：

1. action中发请求
2. handlers拦截这个请求，返回数据

msw的使用

1. 使用handlers配置匹配规则，MSW 1.0之后可以直接使用封装好的http和HttpResponse，无需使用rest
2. 拦截浏览器中的请求应使用setupWorker，拦截node环境中的请求应使用setupServer，所以测试server action使用setupServer
3. 需要注意，setupServer需要一个持久化 Node.js 进程，所以常常使用在单独的测试进程中，比如使用Vitest
4. 如果想将msw放在本地开发服务器上，为了防止热重载造成状态丢失，需要在根layout文件中的RootLayout函数之外直接调用server.listen()

Vitest使用

1. 创建测试入口文件vitest.setup.ts，写入：

   import { beforeAll, afterEach, afterAll } from 'vitest';
   import { server } from './mocks/server';
   
   // 测试前，启动服务端拦截
   beforeAll(() => {
     server.listen({ onUnhandledRequest: 'warn' });
   });
   
   // 每个测试结束后，重置处理器（防止测试间互相污染）
   afterEach(() => {
     server.resetHandlers();
   });
   
   // 所有测试完成后，关闭拦截器
   afterAll(() => {
     server.close();
   });
   

2. 创建配置文件vitest.config.ts，写入：

   import { defineConfig } from 'vitest/config';
   
   export default defineConfig({
     test: {
       // 指定刚才写的 setup 文件位置
       setupFiles: ['./vitest.setup.ts'],
   
       // 如果需要测试环境为 "jsdom"（测试 React 组件）或 "node"（仅测后端逻辑），可在这里配置
       environment: 'node', 
     },
   });
   
   

3. 创建/src/__test__文件夹，创建测试文件actions.test.ts（比如我要测试action.ts），写入：

   // __tests__/actions.test.ts
   import { test, expect } from 'vitest';
   import { getData } from '@/app/actions';
   
   test('Mock server action fetch', async () => {
     const data = await getData();
     const mockData={
   	  id:1,
   	  name:"Hello from MSW"
     }
     expect(data).toEqual(mockData);
   })
   

4. 在 package.json 里添加脚本"test": "vitest"，运行pnpm test即可

注意事项：

1. https://randomuser.me/api/?results=3&inc=name,gender,email,nat,picture&noinfo返回的数据需要解构出results使用
2. action.ts中使用的其他文件中的函数，那个文件必须显式标注成"use server"才行