Expose cookieStore

[michael-slx]

Scope

Adds a new behavior

Compatibility

• This is a breaking change

Feature description

Background / use case

I’m working on a server-side cookie implementation (Node), which I test using Vitest + MSW. However, MSW’s cookie "emulation" interferes with my own since both are storing cookies.

Solution

I personally think the easiest solution would be to export the global cookieStore that MSW uses. This would allow library consumers to clear (or set) cookies if it is necessary for their use case.

If desired, I'm happy to open a PR but I’m unsure whether a test is necessary and how it should be tested.

[kettanaito]

Hi, @michael-slx.

Could you please tell me more about your use case? I feel I'm missing the context. It would be great to include an example of where you want to do something with that cookieStore.

The idea is that the cookie store is an internal mechanism that you shouldn't reference or otherwise interface in your apps/tests. If you want to set a cookie, you don't reach for MSW internals, you just mock a response with the Set-Cookie header as you normally do in the browser.

You can still set whatever you want on document.cookie global and MSW will respect that as it hydrates the cookie store partially from that value.

I can advise a better course of action once I hear more from you. Thanks.

[michael-slx]

Hi @kettanaito,

I am developing a Next application that has to interface with a legacy API that only supports cookie-based authentication. I do not want the browser to interact with that API hence it will completely happen on the server-side (i.e. Node.js).

Since Node’s global fetch() doesn't support cookie storage, I’ve written a wrapper around fetch() that handles cookie storage and serialization. Now I’m trying to integration test this API interfacing code and that’s where MSW comes into play.

I do not want MSW to store any cookies because I'm trying to test the cookie handling of my own code. I cannot clear out document.cookie because this is a Node environment without any DOM.

Thanks for your help in advance!

Example

Handlers

export const handlers = [
    // HTTP "echo" endpoint
    // Sends back basic infos about the request
    http.all("http://localhost/echo", ({ request, cookies }) => {
        const body = {
            method: request.method,
            query: new URL(request.url).searchParams.entries().toArray(),
            headers: request.headers.entries().toArray(),
            cookies: cookies,
        };
        return HttpResponse.json(body);
    }),

    // Set cookie endpoint
    // Sets a cookie named `random` to a random UUID
    http.post("http://localhost/set-cookie", ({ request, cookies }) => {
        const name = "random";
        const value = crypto.randomUUID();
        const body = { name, value };
        return HttpResponse.json(body, {
            headers: {
                "Set-Cookie": `${name}=${value}`,
            },
        });
    }),
];

Integration test

describe("createFetchWithCookies", () => {
    beforeAll(() => server.listen());
    afterEach(() => server.resetHandlers());
    afterAll(() => server.close());

    // TEST WORKS OK
    test("Cookie handling", async () => {
        const { fetch } = await createFetchWithCookies();

        // Sets cookie
        const setCookieRes = await fetch("http://localhost/set-cookie", { method: "POST" });
        const setCookieJson = await setCookieRes.json();
        const { name: cookieKey, value: cookieValue } = setCookieJson;

        // Retrieve request info
        const res = await fetch("http://localhost/echo");
        const resJson = await res.json();

        expect(res.cookies[cookieKey]).toEqual(cookieValue);
    });

    // TEST FAILS
    // Reason: MSW stores the cookie from the test above.
    test("Sends no cookies by default", async () => {
        const { fetch } = await createFetchWithCookies();

        const res = await fetch("http://localhost/echo");
        const resJson = await res.json();

        expect(Object.keys(res.cookies)).toHaveLength(0);
    });
});

[kettanaito]

I wonder if we can solve this by not handling cookies in Node.js in any way? The same behavior you get from Node.js by default. That might be the easiest solution. I might be forgetting context around this, but I cannot think of a use case where I'd want cookies to persist in Node.js (e.g. tests).

[clovis1122]

+1 to this. Another idea is to add an option to disable cookie storage entirely, which would match Node's fetch behavior.

For my use case, I'd like to reuse the mocks I have between local dev and playwright tests via a MOCKS variable. I may clear the cookies in playwright, but MSW keeps them server-side, and that makes my tests flaky.

[kettanaito]

The problem with disabling the cookie store is that it breaks how you expect request's credentials to work. You might make an argument that if Node.js ignores credentials, we should ignore them, too, in Node.js. If you find this a suitable argument, please open an issue to propose this change!

[clovis1122]

@kettanaito, thanks for the response. I can create an issue for this. If disabling is too much, then perhaps provide a way to clear cookies? That would solve my use case. While not the best ergonomic, I imagine userland can call clearCookies() after every request too and still be spec-compliant regarding how credentials work.

[kettanaito]

Getting it more in-line with Node.js has the best ergonomics because we aren't introducing any new behaviors and, in fact, removing things we shouldn't be doing. I'd like to look deeper into this. We had this working in Node.js for some reason. Would be interesting to uproot what those reasons were.

An issue would certainly be appreciated! Thanks.