jest : SecurityError: localStorage is not available for opaque origins

[kitmoovup]

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]

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]

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.

[ben-mckernan]

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]

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

[ben-mckernan]

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

[domenic]

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 :(

[gokulkrishh]

@ben-mckernan Thanks 👍

[domenic]

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

[miamollie]

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]

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

[gokulkrishh]

@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).

[ben-mckernan]

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

[miamollie]

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

[kitmoovup]

@ben-mckernan solution fixed it. Thanks!

[DcsMarcRemolt]

@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]

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

[gokulkrishh]

@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]

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

[lecstor]

if you're not using jsdom then you'll want to set the jest config property testEnvironment to node. (no need to touch testURL)
https://jestjs.io/docs/en/configuration#testenvironment-string

[ghost]

For anyone looking for the actual fix, it's new JSDOM('', { url: 'https://localhost' })

[pavelsust]

Try using this in your package.json file

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

[sam17896]

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

[zuccha]

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]

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]

Update jest from 22 to 26 fixed problem.

[Sroy0202]

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

[adi518]

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.