MSW with Angular Component Testing: Failed to register a Service Worker

[inigoiparragirre]

Current behavior

For Angular Component Testing, I want to use MSW (Mock Service Worker), using msw request handlers instead of cy.intercept(). The tested component is not working as expected

Desired behavior

MSW needs to be registered succesfully. But this is what happens:

Steps to reproduce:

• Install msw as dependency.
• Execute 'npx msw init src/'
• Add msw setup inside test.

Test code to reproduce

I forked the repository cypress-component-testing-apps in https://github.com/inigoiparragirre/cypress-component-testing-apps with an example for AppComponent using MSW (main branch).

Cypress Version

12.8.1

Node version

18.14.1

Operating System

Linux Ubuntu 22.10

Debug Logs

No response

Other

No response

[lmiller1990]

Hi, perhaps duplicate of this issue in the msw repo: https://github.com/mswjs/msw/issues/744

Looks like someone might have a solution in: https://github.com/cypress-io/cypress/issues/16742

Also related: https://github.com/mswjs/msw/issues/744

[inigoiparragirre]

Hi @lmiller1990, this issue is specific to Angular Component Testing. React Component Testing with MSW is working perfectly fine in this repository: cypress-component-testing-apps, so I think the issue is in the configuration files for Webpack in an Angular environment. So not sure about this is duplicated. Thank you!

[lmiller1990]

I am not able to get it to work in the other project in the repository - I'm not seeing the same error, but I'm also not getting back the expected response. Which project(s) did you see it working in?

[lmiller1990]

Actually, it's working now in my Vite project - I can use msw to intercept and respond to /blah as shown here:

[lmiller1990]

Seems Angular specific. The other issue has an Angular example that is also not working: https://github.com/mswjs/msw/issues/744#issuecomment-1351491630 but I got this to work in a simple project (both webpack and Vite).

[lmiller1990]

I spent a few hours trying to figure this out but I am still unsure. I suppose it's something to do with how Angular routes publicPath requests, but I'm yet to figure out how/what is different compared to other webpack based toolchains.

[mct-dev]

I am having the exact same issue but with NextJs instead of Angular. Would love to hear if anyone's been able to get this working! :)

[lydemann]

I tried with the esbuild builder in Angular 16 and it still went looping when I was fetching the MSW service worker.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[M-a-c-Carter]

Well I think this needs to stay open, if the issue is fixed maybe esbuild can be added as an option instead of webpack since angular v17 is now on that. rather not rely on a 3rd party pacakge to use esbuild.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.