[vitest+axios+msw] why can't mock '/hello' but 'http://hello'

[zhanglolo]

import { describe, expect, it, beforeAll, afterAll, afterEach } from "vitest";
import axios from "axios";
import { rest } from "msw";
import { setupServer } from "msw/node";

const server = setupServer(
  rest.get("http://hello", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json("hello"));
  }),
  rest.get("/hello", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json("hello"));
  })
);

describe("suite", () => {
  beforeAll(() => server.listen());

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

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

  it("msw mock http://hello", async () => {
    const reponse = await axios.get("http://hello");
    expect(reponse.data).toMatchInlineSnapshot('"hello"');
  });

  it("msw mock /hello", async () => {
    const reponse = await axios.get("/hello"); //TypeError: Invalid URL
    expect(reponse.data).not.toBeUndefined();
  });
});

need help 😢 thanks!

[INFO 7:23:21 PM]  ❯ index.test.js  (2 tests | 1 failed) 14ms

   ❯ index.test.js > suite > msw mock /hello

     → Invalid URL



⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯



 FAIL  index.test.js > suite > msw mock /hello

TypeError: Invalid URL

 ❯ dispatchHttpRequest node_modules/.pnpm/axios@1.2.2/node_modules/axios/lib/adapters/http.js:181:20

 ❯ http node_modules/.pnpm/axios@1.2.2/node_modules/axios/lib/adapters/http.js:117:10

 ❯ Axios.dispatchRequest node_modules/.pnpm/axios@1.2.2/node_modules/axios/lib/core/dispatchRequest.js:51:10

 ❯ Axios.request node_modules/.pnpm/axios@1.2.2/node_modules/axios/lib/core/Axios.js:142:33

 ❯ Axios.<computed> [as get] node_modules/.pnpm/axios@1.2.2/node_modules/axios/lib/core/Axios.js:168:17

 ❯ Function.wrap [as get] node_modules/.pnpm/axios@1.2.2/node_modules/axios/lib/helpers/bind.js:5:15



⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Serialized Error: {

  "code": "ERR_INVALID_URL",

  "input": "/hello",

}

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯



 Test Files  1 failed (1)

      Tests  1 failed | 1 passed (2)

   Start at  19:23:20

   Duration  537ms (transform 206ms, setup 0ms, collect 115ms, tests 14ms)

[kettanaito]

Hi, @zhanglolo.

You're getting the Invalid URL error because new URL('/hello') is indeed an invalid URL.

Note that you're running tests in Node.js (where Vitest runs), and relative URLs are not supported in Node.js! There's simply nothing to be relative to (in the browser, your URLs are relative to the current window.location).

Solution

• Use the absolute request URL. In your case, you're using axios, so perhaps consider using baseUrl with Axios settings so your request URLs are always absolute.

Note that certain testing frameworks, like Jest, automatically polyfill window.location which may give you a false impression that relative URLs are okay in Node. They are okay only because the testing framework environment supports them. It looks like it's not the case for Vitest.

You can always read more about this in Vitest documentation or on the web. This is not an MSW issue.

[zhanglolo]

Thanks for your reply!

Note that certain testing frameworks, like Jest, automatically polyfill window.location which may give you a false impression that relative URLs are okay in Node. They are okay only because the testing framework environment supports them. It looks like it's not the case for Vitest.

Vitest use environment: "node" default. After I set environment: "jsdom", it works.

---

I have another question:
After set environment: "jsdom", why we still use setupServer but not setupWorker ?
I change code , then get error.

Invariant Violation: [MSW] Failed to execute `setupWorker` in a non-browser environment. Consider using `setupServer` for Node.js environment instead.

import { describe, expect, it, beforeAll, afterAll, afterEach } from "vitest";
import axios from "axios";
import { rest } from "msw";
import { setupWorker } from "msw";

const worker = setupWorker(
  rest.get("http://hello", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json("hello"));
  }),
  rest.get("/hello", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json("hello"));
  })
);

worker.start();

describe("suite", () => {

  it("msw mock http://hello", async () => {
    const reponse = await axios.get("http://hello");
    expect(reponse.data).toMatchInlineSnapshot('"hello"');
  });

  it("msw mock /hello", async () => {
    const reponse = await axios.get("/hello");
    expect(reponse.data).toMatchInlineSnapshot('"hello"');
  });
});

So, we still in Node environment, but just use jsdom cheat axios support relative url ?
Hope your reply🙏

[zhanglolo]

and for your solution:

Use the absolute request URL. In your case, you're using axios, so perhaps consider using baseUrl with Axios settings so your request URLs are always absolute.

what port msw/node listen ?

it("msw mock /hello", async () => {
    const reponse = await axios.get("/hello", { baseURL: "http://localhost:?" });
    expect(reponse.data).toMatchInlineSnapshot('"hello"');
  });

[kettanaito]

After set environment: "jsdom", why we still use setupServer but not setupWorker ?

Because jsdom is not a browser environment. It's still Node.js, it always was. It just ships with minimal polyfills so you could run browser-oriented code in Node.js for testing purposes. Since it's still Node.js, you must use setupServer.

what port msw/node listen ?

MSW doesn't establish any ports or server connections. It runs in the some thread (in the case of Node.js).

If you're using jsdom, you don't have to establish a base URL, it will be automatically resolved to http://localhost. At least, that's what Jest does, I don't know about Vitest. If that doesn't happen, use http://localhost as a dummy base URL.

[Maxim-Mazurok]

Was getting this error because I was mocking window location like so:

const windowLocationAssignMock = vi.fn();
Object.defineProperty(window, "location", {
  value: {
    assign: windowLocationAssignMock,
    search: "?existing=parameters",
  },
  writable: true,
});

[MartinYounghoonKim]

Hi, did you find a solution?

[Maxim-Mazurok]

Yes, for me solution was to create helper functions and mock them instead of window.location.

For example, we had a test to check that a redirect to login occurred. Instead of spying on window.location, I created helper method redirectToLogin() and was mocking/spying on it.

Hope this helps :)