Intercepting msw calls in cypress

[d-ivashchuk]

Hey @kettanaito! I've finally been able to use your amazing library and I must say it's just fabulous DX!

I can't get something working though. I have setup couple of handlers for couple of the routes:

 rest.get("/api/videos", (req, res, ctx) => {
    return res(ctx.json(videosMock));
  }),
  rest.get("/api/courses", (req, res, ctx) => {
    return res(ctx.json(coursesMock));
  }),
  rest.get("/api/purchases", (req, res, ctx) => {
    return res(ctx.json(purchasesMock));
  }),

And everything works perfectly, but I want to intercept these calls in cypress. Using something like this:

cy.visit("/my-courses");
    cy.intercept("GET", "/api/videos").as("getVideos");
    cy.wait("@getVideos");

No luck so far, it just doesn't react although I have the call logs from MSW in console within cypress browser. Any ideas?

[kettanaito]

Hey, @d-ivashchuk. Thank you for the feedback!

As far as I know cy.intercept stubs native XMLHttpRequest/fetch and stores the requests that match your predicate (`"GET", "/api/videos"). This stubbing part means that requests never really happen—they get "silenced" by Cypress in order to be mocked using their API.

MSW doesn't encourage stubbing both conceptually and implementation-wise, so for a request to be captured by MSW it must actually happen (you should see it in the "Network" tab of your dev tools just as any other request). Service Worker API can only intercept actual requests.

I'd suggest dropping cy.intercept and let your application perform requests as it would in production, giving you more confidence in your tests. There's also a React REST API example that features Cypress for E2E tests. The API mocking setup is done on the application's side (which is how you may use it for development already) and requires no additional configurations for Cypress.

[idolize]

Yes - I've already got this functioning (see here) but had to copy/paste the getResponse matching algorithm - would you consider exporting that from the library? If so, I'd be happy to contribute something that could be used as both a connect/express middleware as well as a basic server (if you don't want to bother making your own and attaching the middleware).

What do you think @kettanaito?

[kettanaito]

I think this makes perfect sense as a middleware 👍🏻 Also don't mind exporting getResponse publicly, you can go ahead with this direction, it looks promising. If you wish, I can create a private repo under MSW org where we can collaborate on the solution before releasing it.

[idolize]

@kettanaito awesome! yes, feel free to create the repo and I'll push something to a branch you can take a look at and feel free to comment or modify as you see fit.

[kettanaito]

@idolize, I've created the http-middleware repository with the minimal development setup. Looking forward to collaborating with you on this one!

[idolize]

@kettanaito I've created a PR here mswjs/http-middleware#1 - let's move the discussion there!