mswjs / cookies Goto Github PK

I am using setupServer of msw/node to mock endpoint for tests.

I got the following error:

    TypeError: Cannot read property '_origin' of null

      at Window.get localStorage [as localStorage] (../../../../node_modules/jsdom/lib/jsdom/browser/Window.js:420:50)
      at CookieStore.hydrate (../../../../node_modules/msw/node/lib/index.js:7448:34)
      at setRequestCookies (../../../../node_modules/msw/node/lib/index.js:7549:17)
      at ../../../../node_modules/msw/node/lib/index.js:7609:21
      at ../../../../node_modules/msw/node/lib/index.js:53:71
      at __awaiter (../../../../node_modules/msw/node/lib/index.js:49:12)
      at resolver (../../../../node_modules/msw/node/lib/index.js:7583:24)
      at ClientRequestOverride.<anonymous> (../../../../node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/createClientRequestOverride.ts:189:9)

The error occured because the localStorage is undefined.

I know I can mock it, but it will be good that we don't have to.

BTW, thank you for all of msw/* packages, very usefull

This issue is meant to cover the discussion that started here.

Currently the exposed data structures are the same that are used internally. It would be possible that a user of this library modifies the data not realizing that this might change the behavior.

Anyway it's more a theoretical issue for now since we are the only consumers of this library. :-)

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @mswjs/[email protected] for the project I'm working on.

The problem is that when using jsdom together with node-fetch in Next.js can in some occasions throw an error because it tries to access origin. I am getting the following error thrown Cannot read properties of null (reading '_origin'):

    FetchError: request to http://localhost:54391/ failed, reason: Cannot read properties of null (reading '_origin')

      at ClientRequestOverride.<anonymous> (node_modules/next/node_modules/node-fetch/lib/index.js:1461:11)
      at ClientRequestOverride.<anonymous> (node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/createClientRequestOverride.ts:309:14)
      at ClientRequestOverride.<anonymous> (node_modules/@mswjs/interceptors/src/interceptors/ClientRequest/createClientRequestOverride.ts:196:14)
      at step (node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/createClientRequestOverride.js:33:23)
      at Object.next (node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/createClientRequestOverride.js:14:53)
      at fulfilled (node_modules/@mswjs/interceptors/lib/interceptors/ClientRequest/createClientRequestOverride.js:5:58)

Looks like it's related to trying to access localStorage when running in the jsdom environment; it expects the document.origin to exist which isn't the case when running server-side, the following line is problematic:
https://github.com/jsdom/jsdom/blob/e46f76f7e311447213a3a3be1526db3d53028ee5/lib/jsdom/browser/Window.js#L417-L425

Here is the diff that solved my problem:

diff --git a/node_modules/@mswjs/cookies/lib/CookieStore.js b/node_modules/@mswjs/cookies/lib/CookieStore.js
index 567800c..a4671f3 100644
--- a/node_modules/@mswjs/cookies/lib/CookieStore.js
+++ b/node_modules/@mswjs/cookies/lib/CookieStore.js
@@ -15,6 +15,21 @@ exports.PERSISTENCY_KEY = void 0;
 const set_cookie_parser_1 = require("set-cookie-parser");
 exports.PERSISTENCY_KEY = 'MSW_COOKIE_STORE';
 const SUPPORTS_LOCAL_STORAGE = typeof localStorage !== 'undefined';
+
+function isLocalStorageSupported() {
+    try {
+        if (typeof localStorage === 'undefined') {
+            return false
+        }
+
+        localStorage.setItem('test', 'test')
+        const item = localStorage.getItem('test', 'test')
+        return true
+    } catch (err) {
+        return false
+    }
+}
+
 class CookieStore {
     constructor() {
         this.store = new Map();
@@ -89,9 +104,10 @@ class CookieStore {
      * Hydrates the virtual cookie store from the `localStorage` if defined.
      */
     hydrate() {
-        if (!SUPPORTS_LOCAL_STORAGE) {
+        if (!isLocalStorageSupported()) {
             return;
         }
+
         const persistedCookies = localStorage.getItem(exports.PERSISTENCY_KEY);
         if (persistedCookies) {
             try {
@@ -128,7 +144,7 @@ Invalid value has been removed from localStorage to prevent subsequent failed pa
      * so they are available on the next page load.
      */
     persist() {
-        if (!SUPPORTS_LOCAL_STORAGE) {
+        if (!isLocalStorageSupported()) {
             return;
         }
         const serializedCookies = Array.from(this.store.entries()).map(([origin, cookies]) => {

This issue body was partially generated by patch-package.

Hi, would you mind adding the MIT LICENSE.md file to the repo please (as in https://github.com/mswjs/msw/blob/main/LICENSE.md)?

Thanks very much.

Hi, I've just started trying out MSW recently, and it's mostly going great. But I do have one small annoyance. In one of my tests I'm checking for calls to a local storage mock, and I am seeing roughly 90 checks from MSW for MSW_COOKIE_STORE_test. I wonder if instead of checking for supportsLocalStorage() in every hydrate() and persist() (which I guess can happen a lot?), maybe it can be done once (maybe in the constructor) and the result cached? I'm not very familiar with the architecture here so maybe that's a bad suggestion, but I thought I'd at least bring it up.

Thanks!

This library accesses document directly, implying that it needs either a browser or browser-like environment to run:

Since it's used in MSW, which runs in ambiguous environments, I propose to support running Cookies in Node.js. We already do some checks for localStorage (here) but otherwise still remain incompatible with Node.js runtime.

It's okay if it returns nothing whenever we rely on the document.