Front end request not hitting MSW handlers

[gerarddegas]

Hi all, I have a custom webpack React application where I've set up MSW using Jest within the node approach of setting up MSW. But for some reason when I render my component in my tests, my front end fetch calls do not hit the defined handlers I've used in my setupServer call of msw.

One of my theories is that since I include a proxy to my back-end local url in my webpack and does that throw off the url that the handlers are expecting? when I remove it, it still doesn't work.

devServer: {
    proxy: {
      "/": {
        target: "http://localhost:5555",
      },
    },
    contentBase: path.join(__dirname, "./src"),
    // publicPath: '/static/dist/',
    disableHostCheck: true,
    host: "0.0.0.0",
    port: 8082,
    compress: true,
    clientLogLevel: "warning",
    historyApiFallback: true,
    stats: "errors-only",
    hot: true,
    headers: { "Access-Control-Allow-Origin": "*" },
    contentBase: path.join(__dirname, "public"),
    writeToDisk: true,
  },

I tried to set handlers for all possible backend url's like the following

const handlers = [
  rest.get("/hc", (req, res, ctx) => {
    console.log("req /hc: ", req);
    console.log("ctx /hc: ", ctx);
    return res(
      ctx.status(200),
      ctx.json({
        its: "working! /hc",
      })
    );
  }),
  rest.get("http://localhost:5555/hc", (req, res, ctx) => {
    console.log("req 5555/hc: ", req);
    console.log("ctx 5555/hc: ", ctx);
    return res(
      ctx.status(200),
      ctx.json({
        its: "working! 5555",
      })
    );
  }),
  rest.get("http://localhost:8082/hc", (req, res, ctx) => {
    console.log("req 8082/hc: ", req);
    console.log("ctx 8082/hc: ", ctx);
    return res(
      ctx.status(200),
      ctx.json({
        its: "working! 8082",
      })
    );
  }),
];

But none of them get console logged. I know the handlers are registered because I went through the debugging section in the docs and printed all handlers.

I'm just trying a test component which runs a fetch call on mount

Then in my logs I see this (one interesting thing to note is that the url portion of my response from the fetch call is undefined)

Any info on why this might not be working is much appreciated, I've used this library in past applications with success and would love to be able to leverage in this app. Thanks!

[kettanaito]

Hey, @gerarddegas. Could you please install the latest version of msw (0.30.1 at the moment of this comment) and run your tests again? The newest version comes with the onUnhandledRequest warnings enabled by default, which should be helpful when debugging your issue.

Other than that, it'd be most helpful to have a reproduction repository to look at.

[gerarddegas]

I just figured it out. I was mocking fetch in my setupTest.ts file and when I removed the fetch mock and imported whatwg-fetch polyfill my request were routed accordingly. Thanks for prompt response and keep up the awesome work!

[gerarddegas]

I just figured it out. I was mocking fetch in my setupTest.ts file and when I removed the fetch mock and imported whatwg-fetch polyfill my request were routed accordingly. Thanks for prompt response and keep up the awesome work!