Cypress 与 NextJS SSR - 使用 Axios 拦截 RESTful API

2024-03-15

我正在尝试在我的 SSR next.js 应用程序上使用 cypress 和固定装置编写一些测试,该应用程序使用 Axios 连接到 RESTful API。但我在拦截 RESTful API 时遇到了麻烦cy.intercept()因为 cypress 无法跟踪 SSR 中发送的请求并且cy.intercept()仅适用于 cypress 可以跟踪的请求。有什么方法可以帮助我更改来自 RESTful API 的响应吗?任何软件包也会有帮助。


cy.intercept依赖浏览器内的 API 来捕获请求。您在 Next.js 的 SSR 挂钩中执行的请求(例如getServerSideProps)在浏览器中不会发生,因此,cy.intercept对他们一无所知。

我对 API 模拟解决方案有偏见,但我仍然鼓励您再次研究 MSW。请参阅官方 Next.js 示例 https://github.com/vercel/next.js/tree/canary/examples/with-msw,它使用相同的请求处理程序支持浏览器端和服务器端请求拦截。自述文件还详细介绍了两种拦截工作所需的关键步骤。

这种拦截将 MSW 嵌入到 Next.js 应用程序中。这意味着如果不重新启动运行时或公开运行时请求处理程序,您将无法拥有运行时请求处理程序worker/server测试上下文的实例。这对您本身来说可能不是问题,因此您可以忽略此提及,直到您知道它与您的测试设置相关。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Cypress 与 NextJS SSR - 使用 Axios 拦截 RESTful API 的相关文章

  • 如何将 SVG 导入 Next.js 组件?

    我正在尝试将 SVG 图像从文件导入到 Next js 组件中 在资产文件夹中 我有 google svg 图标
  • Angular 4 RC.4 和 .net core 服务器端预渲染

    我有这个项目https github com damirkusar AngularMeetsNetCore tree AngularRc4 https github com damirkusar AngularMeetsNetCore tr
  • 如何将 Facebook 聊天工具添加到 Next.js?

    我尝试在 Next js 应用程序中添加 Facebook 客户聊天 但不起作用 我找不到我的代码有任何问题 如何在我的 Next js 应用程序中添加 Facebook 客户聊天 我的代码有什么错误吗 有更好的实现来解决这个问题吗 这是我
  • nextjs 动态路由渲染内容不起作用

    我被这个问题困扰了很多天 我在用Next js https nextjs org 并有 3 页 页面 index js 页面 categories js 页面 类别 slug js The categories slug js正在使用Nex
  • 如何在nextjs中添加字体ttf文件

    我是 Nextjs 的新手 我想将自定义字体添加到我的项目中 我完全不知道如何做到这一点 我的字体位于 public fonts 中 我的 global css 文件是这样的 html body padding 0 margin 0 fon
  • CssSyntaxError - Tailwind 和 Next.js 项目中的未知单词

    10 小时后 由于以下构建失败 仍然无法部署我的应用程序 将 React Next 与 Tailwind 结合使用 我相信它来自 PostCSS 插件 但我找不到任何错误 如果有的话 它在生产构建之前在本地主机上完美运行 有什么方法可以识别
  • 如何在cpanel上部署nextjs应用程序?

    我按照以下步骤在 cPanel 上部署 nextjs 转到 package json 并添加以下行 homepage http afsanefadaei ir run next build具有 next文件夹作为我的构建文件夹 go to
  • 返回 React 组件的 Promise 函数

    有没有人修复这个 if else 在运行构建中不起作用 但在运行开发中起作用 实现这项工作的唯一方法是使用反应钩子 但我完全不知道使用哪个钩子以及在哪里实现它 import useAddress from thirdweb dev reac
  • Next Js服务器端Api读写JSON

    我正在尝试使用 Next js 为自己编写一个基本的本地 api 它是一个时间线生成器 而我却陷入了实际从 api 文件夹中读取文件的困境 我想要在本地应用程序中得到什么 1 一个简单的页面 我可以在其中输入事件 以及日期和描述 2 在某处
  • ReferenceError:使用 CKEditor 时未定义 self [重复]

    这个问题在这里已经有答案了 ReferenceError 导入 CKEditor 时未定义 self 我正在使用 next js import CKEditor from ckeditor ckeditor5 react 已经安装使用 np
  • npx create-next-app 命令不起作用 ENOENT 错误

    它显示了这个错误 我正在使用 npx 仍然显示使用纱线 当我将它用于反应应用程序时 npx 工作正常 它应该为我提供下一个应用程序启动器 临时修复可能是 npx create next app latest use npm 以便 creat
  • 重新渲染次数过多。 React 限制渲染数量以防止无限循环。下一个js错误

    有人可以解决这个问题吗 如果我删除 about 和 is 之前的 它不会抛出错误 smh import Navbar from components Navbar import Footer from components Footer i
  • Cypress Vue 组件测试从已挂载发出的事件

    我有一个 vue2 组件 它在其安装的生命周期挂钩中发出一个事件 该事件被发出 并且可以由使用该组件的页面处理 但是 我还想测试该事件是否在我的组件测试中发出 该测试使用赛普拉斯组件测试运行程序 这是一个精简版本 组件 TheCompone
  • 如何在 Cypress 的 E2E 测试中登录 Auth0?

    我已经开始测试 React Web 应用程序 但我没有走得太远 因为我遇到了登录问题 我在用cypress https www cypress io e2e测试工具 将显示一个带有登录按钮的欢迎页面 该页面会将您重定向到auth0 http
  • 如何防止 router.push() 在 Next.js 中间件中缓存重定向到的路由?

    我认为通过路由器进行客户端导航和使用中间件存在问题 不知何故 路由器会记住它第一次被重定向的时间 并且在接下来的时间里它会直接导航到该路由 而无需通过中间件 当我刷新浏览器时 这种情况就会停止发生 如果我在开发环境中运行 也不会发生这种情况
  • Cookie 未存储在浏览器中

    与 一起工作Next js and Django Rest Framework 我正在使用 JWT 对用户进行身份验证 首先 当用户成功登录页面时 会将 cookie 包含 JWT 令牌 发送到浏览器 当用户尝试访问特定页面时 此 cook
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch
  • 生产中未使用快速会话设置 Cookie

    我的应用程序分为客户端和服务器 客户端是托管在 Now sh 上的前端 Nextjs 应用程序 服务器是使用 Express 创建并托管在 Heroku 上的后端 因此域是 client app now sh 和 server app he
  • 使用 Cypress 绕过 UI 登录

    我在绕过 UI 登录时遇到问题 我的 Web 应用程序不使用 API 来验证用户身份 没有像这样的端点 login index php只需打开登录页面并提交表单即可登录 应用程序通过以下方式对用户进行身份验证auth REQUEST use
  • 如何使用 Next Script 精确控制脚本标签的插入位置

    我目前正在尝试将第三方脚本添加到我的 Next js 应用程序中 该脚本会在脚本标签正下方插入一个 iframe 所以我需要精确控制脚本标签在页面上的位置 我目前正在使用下一个 脚本 https nextjs org docs api re

随机推荐

  • 如果 T-SQL 事务被取消,是否会回滚?

    匆忙中 我愚蠢地运行了一条语句来更新表 而没有用where陈述 于是它开始更新表中的所有记录 我立即注意到该错误并点击了 SQL Server Management Studio 中的 取消执行 按钮 但花了一分钟才停止运行 所以我的问题是
  • 嗅探器找不到 DJANGO_SETTINGS_MODULE

    我正在尝试在开发过程中进行更改后自动重新运行测试 搜索了一下之后sniffer http pypi python org pypi sniffer看起来不错 但如果我运行它 我的测试会失败并出现以下错误 ERROR Failure Impo
  • 如何将“active”类添加到 wp_nav_menu() 当前菜单项(简单方法)

    我正在使用入门主题 Underscores 和 Bootstrap 创建自定义 Wordpress 主题 我想修改wp nav menu以便它分配当前菜单项 active类而不是默认类 current menu item 我需要这个才能使用
  • 事件侦听器在没有事件的情况下执行并循环遍历 HTML 集合

    我正在尝试编写一个循环来初始化 JavaScript 中的事件处理程序 我认为我做错了什么 因为我的调试功能在没有事件 点击 发生的情况下被激活 我想做的是这样的 var JS elements document getElementsBy
  • Ada T'Class 的基础知识

    虽然有点不好意思问这个问题 但我知道这是最好的 我已经使用 Ada 编程很多年了 并且几乎可以流利地理解该语言的每个部分 然而 我似乎始终无法完全理解 T Class 借用别人的话 有人可以 像我五岁一样解释一下吗 编辑 我买它只是为了拥有
  • 如何在 while 循环中使用 .nextInt() 和 hasNextInt()

    所以我希望我的程序读取一个输入 其中一行中有一些整数 例如 1 1 2 然后它应该单独读取每个整数并将其打印在新行中 程序必须读取的整数数量没有提前给出 所以我想做的是使用 while 循环 该循环在没有更多整数可供读取后结束 这是我写的代
  • 如何迭代计算这个序列?

    我想迭代计算这个序列 A 0 j j 1 A i 0 A i 1 0 A i j A i 1 A i j 1 这是我的尝试 public function calculsuite1Action i j A array for k 0 k l
  • SwiftUI 中的内容拥抱优先行为

    我有一个List由单元格组成 每个单元格包含一个图像和一列文本 我希望以特定的方式布局 左图 占宽度的四分之一 其余空间留给文本 左对齐 这是我得到的代码 struct TestCell View let model ModelStruct
  • 我应该使用 request.POST 或 form.cleaned_data 中的文本

    这听起来像是一个微不足道的问题 但这对我来说是一场战斗 对于表单 然后点击提交 如果使用form cleaned data访问表单数据 或查找request POST 人们通常做的唯一一件事request POST就是查找提交按钮 但如果我
  • 如何在 SwiftUI 中禁用 ScrollView 弹跳

    Any Modifier可用于阻止反弹ScrollView in swiftUI struct RoomDetailsView View var body some View ScrollView showsIndicators false
  • 如何在GVim中从07增加到08?

    看起来像使用Ctrl A在 GVim 中不会从 07 增加到 08 因为前缀 0 被解释为八进制数 https stackoverflow com questions 13273741 why does incrementing with
  • android BottomNavigationView 中项目选定的颜色

    I refer this https medium com hitherejoe exploring the android design support library bottom navigation drawer 548de699e
  • 使用 Ionic 框架清除历史记录并在登录/注销时重新加载页面

    我是使用 Ionic 进行移动应用程序开发的新手 在登录和注销时 我需要重新加载页面 以便刷新数据 但是 state go mainPage 将用户带回视图而不重新加载 永远不会调用其背后的控制器 有没有办法清除历史记录并重新加载 Ioni
  • 尝试不同的函数,直到不抛出异常

    我有一些函数可以根据一组输入数据尝试各种方法来解决问题 如果该方法无法解决问题 则该函数将抛出异常 我需要按顺序尝试它们 直到没有抛出异常为止 我正在尝试找到一种方法来优雅地做到这一点 try answer method1 x y z ex
  • Google Data API - 两条腿的身份验证令牌重用

    我正在为 Google Contact Data API 使用两条腿的 OAuth 并在每个请求上生成令牌 是否可取或者我应该存储令牌以便下次重复使用吗 另外 如何检测陈旧的令牌 我正在使用Python 和 Gdata Python 客户端
  • JDBCPreparedStatement 始终返回 1 作为自动生成的键[重复]

    这个问题在这里已经有答案了 我有这段代码试图在数据库中插入一条记录 try Connection conn getConnection String sql INSERT INTO myTable userId content timest
  • BotFramework:“状态大小超出了配置的限制。”

    我正在开发一个机器人 每当我在表单流中 PostAsync 英雄卡 50 张英雄卡 时 最后它都会给我一条错误消息 状态大小超出了配置的限制 来自 Microsoft Bot Connector DLL 尝试 setPrivateConve
  • CSS 规则“.drop.a”应用于类“drag a”

    我有以下 HTML 标记 div class drag a div div class drop a div 我还有以下 CSS 规则 该规则仅适用于我的第二个 div drop a background color red 这工作正常 除
  • 截断存储过程中的表

    当我在 Oracle shell 中运行以下命令时 它工作正常 truncate table table name 但是当我尝试将其放入存储过程时 CREATE OR REPLACE PROCEDURE test IS BEGIN trun
  • Cypress 与 NextJS SSR - 使用 Axios 拦截 RESTful API

    我正在尝试在我的 SSR next js 应用程序上使用 cypress 和固定装置编写一些测试 该应用程序使用 Axios 连接到 RESTful API 但我在拦截 RESTful API 时遇到了麻烦cy intercept 因为 c