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

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

How do you access your application?.. I mean, Are you accessing it like, `http://localhost:port...` ? — David R, Jul 27 '18 at 08:58
This is problem with test runner, @DavidR, He has issue with >>>npm run test<< — Martin Chaov, Jul 27 '18 at 09:02
@MartinChaov Yup I know that. I would like see his reply in order to check if something wrong in his `jest` config :-) — David R, Jul 27 '18 at 09:10
I just started running into this myself... I'm not using local-storage at all in the code. Is your code using ts-jest as well? — k2snowman69, Jul 27 '18 at 09:11
To give some context on this error, I started seeing it while attempting to update my `jest` version from `^22.3.0` to `^23.5.0` along with Babel 7. — Bert, Aug 30 '18 at 20:37

score 162 · Answer 1 · edited Jun 24 '22 at 09:28

162

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

    // ...
  }]
}

for configuration in package.json, testURL is removed in jest v28. Now you should use testEnvironmentOptions to pass url option like that:

"jest": {
    "verbose": true,
    "testEnvironmentOptions": {
        "url": "http://localhost/"
    }
}

edited Jun 24 '22 at 09:28

Josef Pfleger

74,165
16
97
99

answered Jul 27 '18 at 09:12

David R

14,711
7
54
72

20

Yep this worked for me... though I don't quite understand why I need this nor why it was working before the latest upgrade – k2snowman69 Jul 27 '18 at 09:14
1

This is discussed in the `jest` github page: https://github.com/facebook/jest/issues/6766 – Jordan Bonitatis Jul 28 '18 at 04:35
3

You can also use the cli option in your npm script : `jest --testURL=\"http://localhost\"`. Useful if you cannot set a global jest configuration because of another environment (react-scripts for me). – Burrich Jul 28 '18 at 12:15
I am working on react native. Even for me `testUrl` worked. – Jimit Patel Sep 07 '18 at 06:36

Burgi · Answer 2 · 2018-08-07T11:42:44.770

83

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

edited Aug 07 '18 at 11:42

answered Jul 27 '18 at 10:05

Burgi

1,385
9
13

3

This worked for me! THIS is the answer you need! Thanks! – blueprintchris Jul 27 '18 at 10:45
It seems that the author hasn`t a node environment - in his case he should set testEnvironment: "jsdom". This works for me with the latest update. Thanks for your advice! – Philipp Jul 27 '18 at 13:47
3

As mentioned in some other answers below, you can skip the generation of a config file (or package.json property) by running `jest --testEnvironment node` or its shorthand `jest --env=node`, intead. – Nicolás Fantone Jul 28 '18 at 01:03
2

This should be the accepted answer. It seems more appropriate for the error. Also if you are only testing scripts it makes no sense to define a `testURL`. – Dez Jul 30 '18 at 21:50

score 21 · Answer 3 · answered Jul 27 '18 at 12:05

21

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!

answered Jul 27 '18 at 12:05

Manuel Morejón

468
4
4

1

If you're using jsdom, the same thing happens regardless of whether or not you specify an `env` via config or commandline. This only started happening with jest's latest update today. Please see @David R's answer for a solution if this is the case for you. – fisch2 Jul 27 '18 at 12:25
It makes sense, the environment determines how the test should run and jsdom seems to be the default. – Mbiplang Ardel Jul 27 '21 at 15:13

score 11 · Answer 4 · edited Aug 14 '18 at 17:44

11

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

edited Aug 14 '18 at 17:44

jmbertucci

8,194
4
50
46

answered Aug 06 '18 at 07:37

p8ul

2,212
19
19

In my case my i added that code in my jsdom configuration file. ```var jsdom = require('jsdom'); var exposedProperties = ['window', 'navigator', 'document']; const { JSDOM } = jsdom; const {document } = (new JSDOM('',{ url: "https://localhost/",})).window; global.document = document;``` – p8ul Aug 07 '18 at 09:04
+1 While not specifically about Jest, this is an alternative solution and could be used for other setups (since this is the top SO for the error code, others, like me, will find this page who aren't using Jest) Per @dspacejs good question, this would be a separate file that's called via your test command in `package.json`. For example, this code could be saved in a `testHelper.ts` file and called using mocha: `scripts: { test-setup: 'mocha --compilers ts:ts-node/register,tsx:ts-nocde/register --require testHelper.ts --reporter progress' }`. – jmbertucci Aug 14 '18 at 17:55

score 9 · Answer 5 · answered Jun 14 '22 at 10:54

9

I had the same issue and manually installing jest-environment-jsdom version 28 (based on this GitHub thread) solved it.

answered Jun 14 '22 at 10:54

Alon

699
2
9
17

To make this work, I had to install `jest-environment-jsdom` at the same version as `jest` using Yarn `resolutions`. – Ninjakannon Apr 19 '23 at 16:33

score 6 · Answer 6 · answered Apr 30 '22 at 00:06

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',
  ...
}

Setting "testEnvironmentOptions.url" did not work for me. But installing "jest-environment-jsdom" and updating the property "testEnvironment" as you said worked perfectly. Thanks! — Gustavo Cesário, May 17 '22 at 12:53
To get this one to work, I had to install `jest-environment-jsdom`: `yarn add --dev jest-environment-jsdom`. — Eric Walker, Sep 23 '22 at 23:35

score 5 · Answer 7 · answered Nov 08 '18 at 18:49

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

score 3 · Answer 8 · answered Nov 12 '19 at 09:31

3

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

answered Nov 12 '19 at 09:31

Mike Rodov

569
1
4
18

Eugène Beliaev · Answer 9 · 2020-06-16T08:09:48.783

3

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

}

edited Jun 16 '20 at 08:09

answered Jun 15 '20 at 22:53

Eugène Beliaev

1,041
10
4

score 0 · Answer 10 · answered Aug 07 '18 at 21:44

0

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.

answered Aug 07 '18 at 21:44

Rock Lee

9,146
10
55
88

This relates to me, I actually wasn't able to finish `npm install` properly due to enterprise proxy. So, the pattern would be uncompleted `npm install`ation – Bernardo Dal Corno Aug 16 '18 at 20:24

score 0 · Answer 11 · answered Nov 03 '18 at 02:35

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"

}

score 0 · Answer 12 · answered Nov 28 '18 at 14:16

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.

score 0 · Answer 13 · edited Jun 07 '20 at 00:03

0

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

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

edited Jun 07 '20 at 00:03

David Buck

3,752
35
31
35

answered Jun 06 '20 at 23:41

Zahid Ali

81
1
2

score 0 · Answer 14 · answered Oct 02 '20 at 12:59

0

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

answered Oct 02 '20 at 12:59

watnFoehn

41
5

Jest SecurityError: localStorage is not available for opaque origins

14 Answers14

Linked