mswjs / cookies Goto Github PK
View Code? Open in Web Editor NEWManage request/response cookies in the environments where those are not supported.
License: MIT License
Manage request/response cookies in the environments where those are not supported.
License: MIT License
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:
Line 94 in d2cad32
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
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.