Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

jest : SecurityError: localStorage is not available for opaque origins #2304

Closed
kitmoovup opened this issue Jul 27, 2018 · 90 comments · May be fixed by drcmda/react-contextual#31
Closed

jest : SecurityError: localStorage is not available for opaque origins #2304

kitmoovup opened this issue Jul 27, 2018 · 90 comments · May be fixed by drcmda/react-contextual#31

Comments

@kitmoovup
Copy link

kitmoovup commented Jul 27, 2018

When I run a jest with my test cases. It shows the following error when I upgrade the package. In my test cases, there is no localStorage is used. How can I fix this problem?

 SecurityError: localStorage is not available for opaque origins
      
      at Window.get localStorage [as localStorage] (node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
          at Array.forEach (<anonymous>)


@domenic
Copy link
Member

domenic commented Jul 27, 2018

Summary of below discussion:

  • The fix is to set a URL for your jsdom, which might need to be done through your testing environment configuration. The default URL, of "about:blank", will cause errors when trying to access localStorage.
  • The root cause is often libraries looping over all jsdom properties and adding them to the global; even if you never use localStorage in your tests, some library or test framework you are depending on is "using" it in this manner. Note that this looping-and-copying technique is explicitly unsupported, so it's not surprising that code that does it could break in a minor release.

Transcription of below comment on the question of whether this is a "breaking change", which has since been hidden by GitHub's "see more comments" feature:

Thanks, but as of this time I don't believe that's the best path forward. It isn't a breaking change for jsdom to implement new web platform features; that's a minor version.

It's possible for dependents, even widely-used dependents, to write unfortunate code that detects new features and throws an exception if they appear. I hope we can all agree that even if such dependents exist, jsdom should not forever give up on adding new features in minor releases.

The situation here is not quite that drastic, but seems to be similar. I haven't seen anyone track down the offending Jest code yet, so it's hard to say exactly, but it appears they're performing an operation which is explicitly broken by the normal course of jsdom development, and which would not work in a web browser that implements localStorage.

I realize this is a hard situation for those of you impacted, by no fault of your own, by an unfortunate interaction regarding how your direct dependency is (ab)using your indirect dependency. But I'm hopeful this can be addressed at the right level, of fixing Jest's buggy code, instead of removing a useful feature from all jsdom users due to one dependent's bugs.

Original reply to the OP, for context:

It seems likely you are not setting a URL in your tests, but you, or perhaps Jest, are accessing window.localStorage. The Jest maintainers may know more about the best fix, but I hear there is a way to set URLs in your Jest tests?

@dmitrizzle
Copy link

This is a very recent issue that seems to have popped up with 11.12.0. I get these same errors when using jest with enzyme.

@ghost
Copy link

ghost commented Jul 27, 2018

Yes, I started having the issue after upgrading from 11.11.0 to 11.12.0. Setting testURL in the jest config fixes the issue.

@gokulkrishh
Copy link

@ben-mckernan Hi, What's the URL you gave to fix this ??

@ghost
Copy link

ghost commented Jul 27, 2018

@gokulkrishh I set it to http://localhost/ but any valid URL seems to work.

@domenic
Copy link
Member

domenic commented Jul 27, 2018

I guess this is probably Enzyme-specific, because Enzyme does the thing that the jsdom docs explicitly warn not to do? Not too surprising that broke on a minor release, unfortunately :(

@justinkchen

This comment has been minimized.

@gokulkrishh
Copy link

@ben-mckernan Thanks 👍

@miamollie

This comment has been minimized.

@domenic
Copy link
Member

domenic commented Jul 27, 2018

("+1" comments will be marked as spam; emailing everyone in the issue thread is not helpful.)

@miamollie
Copy link

Apologies. Just trying to help.

Can confirm adding testURL to jestConfig as @ben-mckernan suggested did fix it.

And we are using Enzyme too, if that helps confirm your intuition.

@bencefr
Copy link

bencefr commented Jul 27, 2018

For electron app test I just set it to "file:/" which also works.

@gokulkrishh
Copy link

gokulkrishh commented Jul 27, 2018

@miamollie I added testURL as per @ben-mckernan suggestion (Using Jest + Enzyme, not sure its enzyme related. Error coming from jest-environment-jsdom which uses jsdom). Due to that my some other test files are failing. Just FYI. See if its works for you. Your test cases might be diff from mine (TestURL might work for you).

@ghost
Copy link

ghost commented Jul 27, 2018

@domenic I am only using jest. So I'm not sure that it is an enzyme issue.

@miamollie
Copy link

@gokulkrishh Yeah, same, it stopped the localStorage security error but made some other tests fail.

@kitmoovup
Copy link
Author

@ben-mckernan solution fixed it. Thanks!

@DcsMarcRemolt
Copy link

@ben-mckernan I'm using jest in an angular setup (with jest-preset-angular), same bug, same solution. So it is not an enzyme problem.

@csvan
Copy link

csvan commented Jul 27, 2018

Seems like Jest needs to change the default value of testURL for this to be mitigated (currently it is about:blank).

@gokulkrishh
Copy link

gokulkrishh commented Jul 27, 2018

@DcsMarcRemolt I was just debugging the issue. Jest is using a dependency module called jest-environment-jsdom in its package.json --> "jsdom": "^11.5.1" caret(^) because of this npm have installed jsdom as 11.12.0 (which is new version published today). So it broke for most of the users. Issue is already created in jest and linked here. Watch out for it.

@Zirro
Copy link
Member

Zirro commented Jul 27, 2018

I'll reopen this issue to give it more visibility. See the first comment from Domenic for a solution.

@zuccha
Copy link

zuccha commented Jul 23, 2020

Why setting url doesn't work for me... i am using react-native.. is there anything else that i am missing?

We had the same issue. In our application we had this code

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');

Turns out we had to add the URL to the JSDOM constructor

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
  url: 'http://localhost/',
});

That fixed the issue.

@Flouwrian
Copy link

Why setting url doesn't work for me... i am using react-native.. is there anything else that i am missing?

We had the same issue. In our application we had this code

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');

Turns out we had to add the URL to the JSDOM constructor

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
  url: 'http://localhost/',
});

That fixed the issue.

This worked for me thank you so much! putting the url in the jest config doesnt seem to work with react-native. putting the url in de jsdom constructor did the trick.

@gustawdaniel
Copy link

Update jest from 22 to 26 fixed problem.

@0sudiptoroy
Copy link

simply use the latest version of jest. currently I'm using 26.5.0 in year 2020 and my problem is solved

@adi518
Copy link

adi518 commented Dec 22, 2020

Try using this in your package.json file

"jest": {
"verbose": true,
"testURL": "http://localhost/"
}

That testURL is the default URL, which means it doesn't solve the issue, at least not with Jest 26.x. I had to do what @zuccha did to get around it.

QMalcolm added a commit to QMalcolm/rocket-ui-test that referenced this issue Apr 8, 2021
Running the tests currently results in an error. Specifically
you'll see: "SecurityError: localStorage is not available for
opaque origins". The root of this issue is
[jsdom](jsdom/jsdom#2304 (comment)).
The solution is to simply set the jest `testUrl` to your localhost.
QMalcolm added a commit to QMalcolm/rocket-ui-test that referenced this issue Apr 8, 2021
Running the tests currently results in an error. Specifically
you'll see: "SecurityError: localStorage is not available for
opaque origins". The root of this issue is
[jsdom](jsdom/jsdom#2304 (comment)).
The solution is to simply set the jest `testUrl` to your localhost.
toptaldev92 added a commit to toptaldev92/react-paginate that referenced this issue Jul 28, 2021
@Michiel87
Copy link

Michiel87 commented Nov 5, 2021

What if you can't set url to localhost? I've set the url to path so it can load other static files. but now I'm getting the localStorage error but no clue how to solve it.
See sandbox.

@Maikel-Nait
Copy link

Maikel-Nait commented Mar 9, 2022

Hi all. I'm actually starting to suffer this problem after upgrading to latest Jest 28.0.0-alpha.7. Rolling back to current 27.5.1 works fine.

I've noticed that on Jest 28.x , parameters to the testEnvironment have to be passed on a testEnvironmentOptions object.

Particularly, the old testURL: 'http://localhost' have to be passed as testEnvironmentOptions: { url: 'http://localhost' }
But no matter using the old testURL or the new testEnvironmentOptions.url approach, I'm always getting the famous error:

SecurityError: localStorage is not available for opaque origins

Interestingly enough, it also seems Jest 28.x is setting jsdom's url to http://localhost by default, so the configuration could be ommited entirely as well.

I'm using testEnvironment: 'jsdom', because I'm testing some React (non-native) application.

Any ideas ? Am I doing something wrong ? Does version 28 have issues configuring the test URL for jsdom environments ?
(switched to version 28, because I want to give a try at the new resolver supporting the package.json exports)

jsdom library used: tried both 18.1.1 and 19.0.0

@SimenB
Copy link
Contributor

SimenB commented Mar 9, 2022

You should report that as a bug to Jest, not here. That said, Jest defaults to localhost, and have done so for years. But you shouldn't install jsdom yourself, it comes with jest-environment-jsdom.

Regardless, if it worked with v27 and doesn't with v28 that should be reported (with a minimal reproduction) to Jest 🙂

@Maikel-Nait
Copy link

Thanks, I'm actually inspecting the code, and can't see anything wrong, but will report on jest Github as well. Thanks

@chrisbobbe
Copy link

chrisbobbe commented May 6, 2022

Quoting from the summary up near the top, #2304 (comment):

The root cause is often libraries looping over all jsdom properties and adding them to the global; even if you never use localStorage in your tests, some library or test framework you are depending on is "using" it in this manner. Note that this looping-and-copying technique is explicitly unsupported, so it's not surprising that code that does it could break in a minor release.

jest-runtime is accessing properties in a loop, including localStorage, at https://github.com/facebook/jest/blob/3390ec4ef6a1b93afa816655f5c1f0605066b15a/packages/jest-runtime/src/index.ts#L1165. I've just opened jestjs/jest#12813 for that.

@bugzpodder
Copy link

i got this error and it was because i had jest 28 and jest-environment-jsdom 26. upgrading the latter to v28 and it was fixed

@C-D-Lewis
Copy link

Not using Jest - fix for me using browser-env with Mocha was to pass options as documented:

const browserEnv = require('browser-env');

browserEnv({ url: 'http://localhost' });

Hopefully this saves people in the same boat as me (seemingly the road less travelled) some time!

renabriseno68 added a commit to renabriseno68/react-native-nfc-manager-for-android that referenced this issue Sep 13, 2022
@normanlei0901
Copy link

I still had this issue with "jest": "^29.0.3" and even with localhost url setup in the config. Any idea? thanks

mcdonnelljoel09 added a commit to mcdonnelljoel09/react-native-nfc-manager-build that referenced this issue Sep 23, 2022
PatrickMcKenzier pushed a commit to PatrickMcKenzier/microbundle that referenced this issue Oct 10, 2022
@yuanlllshuai
Copy link

yuanlllshuai commented Mar 9, 2023

  1. yarn add --dev jsdom-global
    2.jest.setup.js: require('jsdom-global')()

@lisliefor
Copy link

lisliefor commented Apr 20, 2023

Hi all. I'm actually starting to suffer this problem after upgrading to latest Jest 28.0.0-alpha.7. Rolling back to current 27.5.1 works fine.

I've noticed that on Jest 28.x , parameters to the testEnvironment have to be passed on a testEnvironmentOptions object.

Particularly, the old testURL: 'http://localhost' have to be passed as testEnvironmentOptions: { url: 'http://localhost' } But no matter using the old testURL or the new testEnvironmentOptions.url approach, I'm always getting the famous error:

SecurityError: localStorage is not available for opaque origins

Interestingly enough, it also seems Jest 28.x is setting jsdom's url to http://localhost by default, so the configuration could be ommited entirely as well.

I'm using testEnvironment: 'jsdom', because I'm testing some React (non-native) application.

Any ideas ? Am I doing something wrong ? Does version 28 have issues configuring the test URL for jsdom environments ? (switched to version 28, because I want to give a try at the new resolver supporting the package.json exports)

jsdom library used: tried both 18.1.1 and 19.0.0

I also got this question, the version of jest and jest-cli are both v29.5, even I set testEnvironment and testEnvironmentOptions, it still doesn't work.

Finally, I roll back those version to 27.5.1, it works.
Then I try to upgrade them to v29.5, and install jest-environment-jsdom, it also works.
It seems caused by the default version of jest-environment-jsdom is v24 (you can see it in package-lock.js), it can't work well with the newest jest and jest-cli, should keep them in same version.

Munavvar-Haydarov added a commit to Munavvar-Haydarov/react-pagenation-pro that referenced this issue Apr 26, 2023
LishuGupta652 pushed a commit to LishuGupta652/create-react-app-1 that referenced this issue Oct 8, 2024
* Update jest version

* Update babel-jest version

* Use testURL: http://localhost in jest configs.

* Update to jest version 23.5

This version of jest includes a fix for jsdom/jsdom#2304

* "testURL": "http://localhost" is default with jest v23.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.