使用msw+vitest测试Nextjs Server Action(最新版)

思路:

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

msw的使用

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

Vitest使用

  1. 创建测试入口文件vitest.setup.ts,写入:

    javascript 复制代码
    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,写入:

    php 复制代码
    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),写入:

    javascript 复制代码
    // __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"才行
相关推荐
中微子4 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君5 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子5 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡6 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则6 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele7 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4537 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友7 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir7 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴7 小时前
WebSocket实时通信入门到实践
前端·javascript