当使用testcafe时， MSW不能拦截请求，因为页面在工作范围之外

Question

我有一个React应用程序，我正在测试Testcafe(与gherkin-testcafe)。我正在使用MSW来模拟API响应，这非常有效。然而，问题是，当运行testcafe测试针对我的本地版本运行MSW时，我得到以下消息:

MSW Cannot intercept requests on this page because it's outside of the worker's scope ("http://localhost:1337"). If you wish to mock API requests on this page, you must resolve this scope issue.
- (Recommended) Register the worker at the root level ("/") of your application.
- Set the "Service-Worker-Allowed" response header to allow out-of-scope workers.

据我所知，MSW默认使用范围"/"如果你不设置一个，我试过明确设置它，似乎没有什么不同。我也试过设置标题，但我真的不知道我想设置它。我试过"/">

有谁知道我怎么能这工作吗?

Answer 1

该错误暗示该worker没有在根目录下注册。请注意，service worker的作用域默认为服务所在目录的，并且该目录有效地成为它的/。这并不意味着它是你的应用程序的根。

考虑一下:

public/
foo/
mockServiceWorker.js

工作器的/范围将是/foo(假设您的站点是从/public提供服务的)。这可能就是你的问题所在。

解决这个问题:

1. 确保您已经在应用程序的根级别生成了worker文件。通常是/public文件夹。
2. 检查您看到此警告的页面的URL位置。这是一个仅针对浏览器的警告，因此您可以检查您的运行时——它包含最有用的调试信息。也许Testcafe把你的整个应用嵌套在某个路径下，这就破坏了worker的功能。如果是这种情况，要么阅读Testcafe文档，在根路由上为你的应用提供服务，要么分别配置serviceWorker.scope，这样worker就知道它在哪个路径上被服务(这可能还需要将worker脚本代理到Testcafe的位置，作为测试设置的一部分)。

如果没有帮助，请提供你尝试过的事情的清单以及你收到的结果。