问题标签 [msw]

我没有模拟 axios 请求，而是尝试使用 msw 测试组件，但是在请求之后我没有得到组件中内容的可见性，我做错了什么？

我的组件

我的测试文件

我正在使用带有 MSW 的 Redux Toolkit 和 RTK Query 进行模拟，但在尝试返回测试错误时，我似乎得到了相同的数据。我怀疑这是 RTK 查询缓存行为的问题，并尝试使用工具包 createApi 方法的这些选项禁用它，但它们似乎没有解决问题：

在 MSW 文档中，它提供了使用其他库时如何解决此问题的示例：https ://mswjs.io/docs/faq#why-do-i-get-stale-responses-when-using-react-queryswretc

使用 Redux Toolkit 和 RTK Query 时如何实现相同的效果？

在我使用 Supertest 和 MSW 的测试中，我注意到，尽管它们仍然成功通过，但 MSW 已经开始对 Supertest 发出的请求显示警告。例如（见文末重现的文件）：

该请求GET http://127.0.0.1:55984/api是Supertest向应用程序发出的请求，这是测试的重点，而不是 MSW 需要处理的请求。当我第一次编写测试时，也没有显示这些警告。

链接页面显示了如何创建处理程序，但我不希望 MSW 处理这些请求。为什么会发生这种情况，我该如何阻止它显示"/api"呼叫警告？

package.json：

app.js：

app.test.js：

我正在为我的 React 应用程序使用 MSW，并且在尝试以模拟模式运行时出现以下错误；尝试将请求 /api/myApi 从 localhost:3000 代理到 { port: 8080 } (ECONNREFUSED) ( https://nodejs.org/api/errors.html#errors_common_system_errors ) 时发生错误我正在尝试将两者用于测试和作为开发 api 服务器（模拟数据）

不确定在模拟模式下运行时代理请求是否需要额外的配置。

下面是我在 package.json 中的命令

下面是 src/index.js 中的代码

//src/browser.js

下面是 src/testServer.js

我正在尝试使用 msw 来运行带有模拟数据的 React 应用程序。下面是我的 index.js；

我的服务工作者 js 位于 public/mockServiceWorker.js

我的 src/mocks/browser.js 如下；

我的 src/mocks/index.js 如下；

现在在浏览器中运行应用程序时，我看到以下错误；

我也有点困惑，因为我看到在 src 下创建了一个额外的 serviceWorker.js（这似乎是通过 create-react-app 生成的），正如你在上面看到的，这也是在 src/index.js 中导入的（再次通过 create-react-app) ，但我希望使用的是 public/mockServiceWorker.js

我不确定这些是否无关。我正在尝试遵循https://github.com/ghoshnirmalya/introduction-to-msw上的示例

还有 MSW 官方页面供参考 - https://mswjs.io/docs/getting-started/integrate/browser

我想测试我的应用程序，让用户输入一个向 Google Books API 发送请求的查询，然后显示响应。

我已经将数据获取逻辑分离到它自己的自定义钩子中。我想用 Mock Service Worker 来模拟 fetch。我在运行测试时收到无效的挂钩调用。

确认

• 在运行npm ls react-domand时确认匹配的 React 版本npm ls react，并返回react-dom@17.0.2and react@17.0.2。
• 未在类组件、事件处理程序、useMemo、useReducer 或 useEffect 中调用。

我究竟做错了什么？代码沙盒

所以我在前面使用 React/redux，我正在尝试测试提交的表单是否将 redux 操作分派到服务器。我正在尝试使用 MSW 模拟服务器并查看它是否已被调用，但它似乎无法正常工作。

form.test.tsx

所以基本上req应该是真实的。我已经对端点进行了三次检查，并检查了高级开发人员的一些其他示例，并遵循（复制）了它。我也试过testServer.resetHandlers()

我似乎无法让它工作。

我已经尝试了互联网上描述的所有可能的解决方案，但似乎没有任何帮助。

我创建了一个模拟服务器并试图拦截一个 GraphQL 调用：

./setup/setup-server.ts

./graphql/use-get-operation.ts

通话不会被拦截。

我已经尝试过：

• 在配置文件中导入 jest-fetch-mock；
• 在 setupFiles.js 中启动服务器（如文档中所示）；
• 直接在测试文件中启动服务器；
• 在操作名称中使用正则表达式而不是字符串；

似乎没有任何效果。

我尝试同时创建查询和突变，但没有成功。

使用的 MSW 版本：0.33.0

我将 msw/node 与我的 react-testing-library 集成测试一起使用。

当我们使用 msw/node 模拟 fetch api 时，我们必须为此使用 polyfills，因为 node 不支持浏览器特定的 api，例如 localstorage、fetch。

msw 文档还指出，我们必须对不受支持的功能使用 polyfill。

正如其他人所建议的那样，我们似乎可以使用 whatwg-fetch 在 msw/node 环境中模拟 fetch api 。

但是whatwg-fetch声明我们不能在节点环境中使用它们，这就是我感到困惑的原因。

发生这种冲突是因为 msw/node 的环境不是本机节点环境吗？似乎 jest 和 msw/node 都在节点环境上运行，是什么使 msw/node 环境能够使用 whatwg-fetch 可用？

谢谢你。

我已经阅读了我的“公共”目录在哪里？文档。

公共目录通常是服务器的根目录（即 ./build、./public 或 ./dist）。该目录通常提交给 Git，Mock Service Worker 也应该如此。

./dist当我们使用 webpack 将源代码编译到output.path: './dist'目录时，我认为我们不应该提交到 Git。这让我很困惑。我尝试集成MSW 到浏览器环境中。

webpack.config.js：

src/index.js：

src/index.html：

src/mocks/browser.js：

src/mocks/handlers.js：

我尝试过以下两种方法，当我使用npx webpack serve命令启动 webpack 开发服务器并访问我的应用程序时，它们都可以工作。我得到了正确的嘲笑回应。

在目录中生成mockServiceWorker.js文件./src/：

package.json用以下内容覆盖

在目录中生成./dist目录和mockServiceWorker.js文件./dist/。

但是，./dist/文件中的.gitignore目录，不会提交给 Git。

webpack-dev-server编译后不写任何输出文件。相反，它将捆绑文件保存在内存中。这意味着在CLI 生成它之前没有真正的./dist目录。msw此外，./dist将来可以删除该文件以重新编译。

那么，这样使用的时候webpack-dev-server，MSW初始化的公共目录应该是什么呢？