Intercepting requests from another package inside a monorepo

[alessandrojcm]

Hi there!

I've been banging my head against the keyboard for the past day or so trying to get this resolved, I'm pretty sure I am missing some configuration step but I cannot seem to find what it is. My problem is as follows:

I have a monorepo using Turbo and yarn workspaces, pretty much a carbon copy of this Turborepo example. Now, in my apps folder I have a React app that uses Vite and Vitest as per their example. Then, in my packages folder I have a library (let's call it common) that is supposed to abstract certain common HTTP calls that are common to the react applications (we'll have around three of them). This package uses ky (and thus uses fetch).

My problem is that, when I try to write tests on my react app using msw, msw fails to intercept the HTTP calls made by this common package. There's no error in the console (I have onUnhandledRequest set to error), MSW just does not intercept the call. But, if I write the HTTP call directly in the app using fetch (ie without importing from common); the test passes, thus making me think I am missing some configuration steps. I have used MSW in the past on non-monorepo packages and I have been able to intercept requests from third-party dependencies, so I am not sure what would be different here.

Please check my reproduction repo to see the problem.

I'm not sure if this is a MSW, Vite, or Turbo problem; so feel free to point me in the right direction if you think it is not.

Thanks.

[kettanaito]

Hey, @alessandrojcm. I'm sorry that you're struggling to make this work. Let's solve this together.

First, what puts me off is this sentence:

There's no error in the console (I have onUnhandledRequest set to error), MSW just does not intercept the call.

If you have onUnhandledRequest strategy set, and there's no error for an unhandled request, this usually means either of two things:

• MSW is not set up correctly;
• Your request doesn't actually happen in the current context.

I lean towards the second being the case here. I don't think it's a Turborepo problem, as far as I can see it's not affecting the tests in any way. I'd have to clone the repo and debug it to provide you with additional detail.

[alessandrojcm]

Hey @kettanaito thanks for your speedy response! Yes, your second assumption makes sense, maybe's got to do with the way vitest runs the tests?

[alessandrojcm]

Hi there @kettanaito, sorry but have you got a chance to look into this yet? Thanks!

[alessandrojcm]

@kettanaito 👀

[alessandrojcm]

Ok so after much tinkering I finally hit something. If I override the global fetch with my custom fetch function (in this case from cross-fetch), MSW manages to intercept the request.

In my setup.ts, from the package that is calling vitest (in this case apps/react-testing-lib-msw):

import { server } from './mocks/server';
import { afterAll, afterEach, beforeAll } from 'vitest';
import fetch from 'cross-fetch';

// This argument sends an object thus fetch fails for some reason, I need to explicitly call url
global.fetch = (req) => {
  return fetch(req.url);
};

beforeAll(() => {
  server.listen({onUnhandledRequest: 'error'});
});
afterAll(() => server.close());
afterEach(() => server.resetHandlers());

Now this obviously does not feel right, but I am not sure what to do, should I open I ticket?

[lambdalisue]

This workaround works on my environment as well. I think it should be issued.

[camflan]

I've been fighting this issue today too! Helper library in a monorepo which presents a unified service API client, and the calls are not being caught.

Versions:
node@16.16.0
msw@0.46.1
axios@0.27.2
jest@28.1.3

[alessandrojcm]

I think it's like @kettanaito said, the requests for the external packages are made in a different context. Did you try the workaround in my previous comment?

[camflan]

@alessandrojcm I haven't tried that yet. I'm using axios so I don't think I would monkeypatch fetch. IIRC, axios is using http on node 🤔

[alessandrojcm]

Ah sorry misread that, yeah I guess you should patch whatever axios is using. Not sure how you'd do that tho

[camflan]

No problem - yeah, it's using the node http/https libs from what I remember. Not sure the best way to patch that either. Maybe @kettanaito will have some insight 🤞

[lambdalisue]

It seems forcedly overwriting globalThis.fetch is the point. The following code works as expect. Note that overwriting Request and else to avoid TypeError: Invalid URL.

import fetch, { Headers, Request, Response } from "node-fetch";
import { afterAll, afterEach, beforeAll } from "vitest";
import { server } from "./mocks/server";

// Forcedly overwrite `globalThis.fetch` to enable msw
// https://github.com/node-fetch/node-fetch#providing-global-access
// https://github.com/mswjs/msw/discussions/1296
const globalThisAny: any = globalThis;
globalThisAny.fetch = fetch;
globalThisAny.Headers = Headers;
globalThisAny.Request = Request;
globalThisAny.Response = Response;

beforeAll(() => {
  server.listen({
    onUnhandledRequest: "error",
  });
});

afterAll(() => server.close());

afterEach(() => server.resetHandlers());

[alessandrojcm]

Great, I don't know if I should file an issue tho; maybe this is expected behavior from MSW after all.

[chybisov]

Thanks, this helped me make it work with ky even though ky-universal already comes with these overrides.

[arnaudforaison]

@chybisov How resolve this with ky ? which fetch you put on globalThis.fetch ?

[chybisov]

@alessandrojcm hey, this one worked for us at that time, but we moved to native fetch since then https://github.com/lifinance/sdk/blob/7783122d931461d2951cf84619b210677ff427ae/test/setupEnv.ts