'Jest SecurityError: localStorage is not available for opaque origins

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

Solution 1:^[1]

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:^[2]

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:^[3]

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:^[4]

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:^[5]

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:^[6]

for me this was solved by upgrading to "jest": "^24.9.0",

Solution 7:^[7]

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:^[8]

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:^[9]

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:^[10]

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:^[11]

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:^[12]

I have the same issue and placing this in my package.json file worked for me:

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

Solution 13:^[13]

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/',
});```

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ky6uk
Solution 2
Solution 3	Manuel Morejón
Solution 4	jmbertucci
Solution 5	Scott Martin
Solution 6	Mike Rodov
Solution 7
Solution 8	technik
Solution 9	Rock Lee
Solution 10	Amjad Khan
Solution 11	pascalwhoop
Solution 12	David Buck
Solution 13	watnFoehn

'Jest SecurityError: localStorage is not available for opaque origins

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]