Interception is no longer working since v2.0.6

[ribeaud]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

v20.10.0

Reproduction repository

https://gitlab.com/biomedit/portal/-/tree/main/frontend

Reproduction steps

1. Checkout above repository and go to pointed directory
2. In package.json, change msw to v2.0.11, run npm i
3. Execute test PgpKeyInfoManage.test.tsx: npm test -- src/components/admin/PgpKeyInfoManage.test.tsx

Current behavior

The test is failing since v2.0.6. For some reason I do not understand yet, the interception is no longer working. We are using a mix of msw, OpenAPI Generator, jest and react.

I went through the release notes and I have no clue which change could be responsible for this behavior.

Expected behavior

In a perfect world, the defined interception works and my test is green, as it used to be.

[kettanaito]

Hi, @ribeaud. Thanks for reporting this.

I see nothing in 2.0.6 - 2.0.11 releases that could have caused this. From the brief look at the repo, your setup seems to be okay.

I recommend following the Debugging runbook to see if you can uncover any issues. Please do so and let me know what each step yields. Thanks.

[ribeaud]

Hi @kettanaito. Thanks for the pointer. I will follow the steps and let you know.

[ribeaud]

Hi @kettanaito. Thank you so much. This was, indeed, very useful.

I've found out the problem. Our generated API have a fetch invocation which looks as following:

response = await (this.configuration.fetchApi || fetch)(fetchParams.url, fetchParams.init);

If I remove the last part fetchParams.init: response = await fetch(fetchParams.url); (knowing that this.configuration.fetchApi is undefined in our case), then the call is intercepted by msw and the test becomes green.

To me it looks like msw gets stricter after 2.0.6. Could you confirm?

Is that something I have to solve on my side? Or do you think this could trigger a change in msw library?

[kettanaito]

@ribeaud, I don't believe MSW has any changes affecting this. Do you observe any request difference when passing undefined as init to the fetch call vs not doing so? Is the request the same?

I suspect that may affect how fetch() works, producing a different, non-matching request.

[ribeaud]

@kettanaito, Mmmmh... This is really weird. Changing the dependency to 2.0.6, npm i, running the test, everything OK. Back to 2.0.11, npm i, running the test, red. AFAIK, fetch does not change between the two procedures, or how? Does msw draw different sets of dependencies between the two versions, which could explain this behaviour on my end?

Now trying your suggestion with undefined init...

[ribeaud]

Setting init to undefined works with both 2.0.6 and 2.0.11.

[ribeaud]

I just saw something interesting: after npm i with 2.0.11, "node-fetch": "^2.6.7" disappears from package-json.lock and @mswjs/interceptors requires ^0.25.13 (instead of ^0.25.11) for node_modules/msw.

[ribeaud]

If I force my openapi code to use node-fetch, then I am back to normal (by default it is using typescript-fetch). I now have a solution but I am not really sure what to do... What would you suggest to me?

[jd-carroll]

It is probably not an issue with msw. Speaking from my own cold bitter experience do everything you possibly can to avoid multiple fetch implementations. If you are using msw then you want to be using the native fetch from node.

Things I would do:

1. Move to nodejs v20.x
2. Remove any fetch pollyfill (e.g. node-fetch & typescript-fetch)

Obviously this may not be possible in your environment, but would strongly push for that.

[kettanaito]

Just gave this a try using [email protected]:

> jest src/components/admin/PgpKeyInfoManage.test.tsx

 PASS  src/components/admin/PgpKeyInfoManage.test.tsx (5.767 s)
  PgpKeyInfoManage
    ✓ Should only show edit button for keys with allowedPgpKeyInfoStatusEnumSubset (217 ms)

The reproduction scenario is passing. I conclude this issue resolved.

If you encounter any other problems, feel free to comment below. Thanks.