Jest SecurityError: localStorage is not available for opaque origins
Javascriptnode.jsNpmJestjsJavascript Problem Overview
When I want to run my project with the command npm run test, I get the error below. What is causing this?
FAIL
ā Test suite failed to run
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>)
Javascript Solutions
Solution 1 - Javascript
In case, if you are accessing your application with a http://localhost prefix, you need to update your jest configuration (in your jest.config.js) as,
"jest": {
"verbose": true,
"testURL": "http://localhost/"
}
In case you do not already have any jest configuration, just include the configuration in your package.json. For example:
{
"name": "...",
"description": "...",
...
"jest": {
"verbose": true,
"testURL": "http://localhost/"
}
}
or in jest.config.js :
module.exports = {
verbose: true,
testURL: "http://localhost/",
...
}
or if you have projects configured:
module.exports = {
verbose: true,
projects: [{
runner: 'jest-runner',
testURL: "http://localhost/",
// ...
}]
}
Solution 2 - Javascript
I just had this cropping up in a large monorepo (in unit tests, that otherwise wouldn't have required jsdom). Explicitly setting the following in our jest.config.js (or the package.json equivalent) also alleviated that issue:
module.exports = {
testEnvironment: 'node'
}
Update: As Nicolas mentioned below (thanks!), you can also add the following flags if you're not using any config files:
jest --testEnvironment node
# or
jest --env=node
Solution 3 - Javascript
You must specify what environment (--env) are you going to use.
When you run jest command in the package.json you should specify the environment (jsdom or node). For example:
"scripts": {
"jest": "jest --env=node --colors --coverage test",
"test": "npm run jest"
},
This should work for you!
Solution 4 - Javascript
If you are using jsdom, make sure you include url.
Checkout jsdom repository simple options. https://github.com/jsdom/jsdom#simple-options
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`...`, { url: "https://example.org/" });
Solution 5 - Javascript
The suggestion in the top-rated answer of adding testURL: "http://localhost" to my Jest config didn't work for me. However, this suggestion from the jsdom GitHub discussion, of passing a URL in when creating the jsdom object, did.
const url = 'http://localhost';
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { url });
Solution 6 - Javascript
for me this was solved by upgrading to "jest": "^24.9.0",
Solution 7 - Javascript
To solve the Jest SecurityError: localStorage error you need to add the jest: { ... } part to your package.json file
{
"name": "...",
"version": "..",
"main": "..",
"description": "...",
...
"jest": { "verbose": true, "testURL": "http://localhost/" },
}
Solution 8 - Javascript
The issue for me occured when I updated the jest to v28.0.3. Seems like in the release 28.0.0 they depricated the testUrl and introduced an object testEnvironmentOptions with property url that has default value 'http://localhost/';.
> Deprecation Warning: > > Option "testURL" was replaced by passing the URL via > "testEnvironmentOptions.url". > > Please update your configuration. > > Configuration Documentation: https://jestjs.io/docs/configuration
Check the PR here: https://github.com/facebook/jest/pull/10797
However my issue disapeared when I updated the jest-environment-jsdom and set in the jest.config.js the testEnvironment to it.
module.exports = {
...
testEnvironment: 'jest-environment-jsdom',
...
}
Solution 9 - Javascript
This may sound silly, but for me, the problem was caused because I had mistakenly installed random packages with npm update. I was running npm install and then npm update but I should have only ran npm install. I fixed the problem by deleting node_modules directory and running npm install again.
Solution 10 - Javascript
You do not need to do anything while working with React JS. It is default behavior of the create-react-app to place JEST and setting up testing environment. On running of below,it start showing the test success or fail,
> npm test
In case you want test coverage, you simply need to add below to package.json file
> "test": "react-scripts test --coverage" Now your "script" of package.json look like,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --coverage",
"eject": "react-scripts eject"
}
Solution 11 - Javascript
This popped up with me when integrating enzyme with jest. The Github Issue Discussion suggests the same as noted above, namely adding
"testURL": "http://localhost/"
to the jest config. However, it's good to know that this is triggered also by enzyme. For me it was React v15 and the v15 adapter.
Solution 12 - Javascript
I have the same issue and placing this in my package.json file worked for me:
"jest": {
"verbose": true,
"testURL": "http://localhost/"
}
Solution 13 - Javascript
If you are using jsdom you have to change your setup for tests like this:
const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
url: 'http://localhost/',
});```