Jest SecurityError: localStorage is not available for opaque origins

Question

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

SecurityE         


        

Answer 1

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"

}

Answer 2

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/",

    // ...
  }]
}

Answer 3

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.

Answer 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/" });

Answer 5

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.

Answer 6

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

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