[vitest+axios+msw] why can't mock '/hello' but 'http://hello' #1521
-
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! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 5 replies
-
|
Hi, @zhanglolo. You're getting the 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 Solution
You can always read more about this in Vitest documentation or on the web. This is not an MSW issue. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your reply!
Vitest use I have another question: 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 ? |
Beta Was this translation helpful? Give feedback.
-
|
and for your solution:
what port msw/node listen ? it("msw mock /hello", async () => {
const reponse = await axios.get("/hello", { baseURL: "http://localhost:?" });
expect(reponse.data).toMatchInlineSnapshot('"hello"');
}); |
Beta Was this translation helpful? Give feedback.
-
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
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 |
Beta Was this translation helpful? Give feedback.
-
|
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,
}); |
Beta Was this translation helpful? Give feedback.
-
|
Hi, did you find a solution? |
Beta Was this translation helpful? Give feedback.
-
|
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 Hope this helps :) |
Beta Was this translation helpful? Give feedback.
Hi, @zhanglolo.
You're getting the
Invalid URLerror becausenew 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
axios, so perhaps consider usingbaseUrlwith Axios settings so your request URLs are always absolute.