msw in testcafe says its started, but responds with 404

Describe the bug

I am attempted to use msw in conjunction with testcafe (the best e2e testing tool for node, yeah even better than cypress, shamless plug).

testcafe has good docs about running service workers & https features in tests which I am following.

When I run the test, I can see it says [MSW] Mocking enabled but then none of the fetches are working.

Environment

• msw: 0.19.4
• nodejs: v12.16.1
• yarn:1.22.4

Please also provide your browser version. chrome 83

To Reproduce

Steps to reproduce the behavior:

1. Clone https://github.com/benmonro/msw-server/tree/feature/testcafe (note repro for this is on a branch called feature/testcafe)
2. (cd app && yarn)
3. yarn
4. yarn testcafe
5. testcafe will launch a browser, Once the browser loads you can launch chrome dev tools and see the 404 as shown in the above screenshot.

If you’d like to see this working in the actual app:

1. (cd app && yarn dev)
2. you can then add a todo or click a todo to remove one.

that all goes through msw and works fine. it only seems to be problematic over testcafe’s proxy server.

Expected behavior

expecting fetch calls to be mocked.

Screenshots

If applicable, add screenshots to help explain your problem. (see above)

[benmonro]

@kettanaito I have a fix, but I’m not sure where to put a test to capture the fix, would you mind pointing me in the right place? I just have to add a null check for req.body.query and it seems to fix it.

[kettanaito]

Hey, I’m glad to see it running!

The usage of asterisk proves that the issue is with the proxy URL that Testcafe prepends. While asterisk would work, it’s generally not recommended, as it literally matches <ANYTHING>/todos, which may lead to unexpected matches.

I recommend to look into the Testcafe API and grab its prepended URL during the test runtime. Then use that URL when resolving a request handler’s route. Here’s an example:

const IS_TEST = process.env.NODE_ENV === 'test'

function withUrl(url) {
  const prefix = IS_TEST ? testCafeApi.getUrl() : ''
  return `${prefix}${url}`
}

rest.get(withUrl('/todo'), (req, res, ctx) => res())