Jest tests fail - SecurityError: localStorage is not available for opaque origins

[bigtunacan]

To reproduce just generate a new project using vue init webpack my-project and choose Jest as the test suite. Then run npm run unit and it will fail with error

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

This appears related to this issue with jsdom https://github.com/jsdom/jsdom/issues/2304

For now there is a workaround by locking jsdom to version 11.11.0

[shayneo]

Same issue here, was able to resolve by adding testEnvironment: 'node' to jest.config.js

[scriada]

Based on the link in @bigtunacan 's original comment I was able to resolve this by adding:

testURL: 'http://localhost'

to the jest.conf.js file.

I also noticed that this filename doesn't match the default jest config filename (should be test.config.js) so jest won't pick it up without an explicit --config argument.

[agirorn]

When I added testEnvironment: 'node' as @shayneo suggested to a new project. I got the tests running but the following error.

> [email protected] test /home/agirorn/code-play/vue-webpack                                                                                                                                                                                  
> npm run unit && npm run e2e                                                                                                                                                                                                                 
                                                                                                                                                                                         
> [email protected] unit /home/agirorn/code-play/vue-webpack                                                                                                                                                                                  
> jest --config test/unit/jest.conf.js --coverage                                                                                                                                                                                             
                                                                                                                                                                                                                                              
● Deprecation Warning:                                                                                                                                                                                                                        

  Option "mapCoverage" has been removed, as it's no longer necessary.                                                                                                                                                                         

  Please update your configuration.

  Configuration Documentation:
  https://facebook.github.io/jest/docs/configuration.html

 FAIL  test/unit/specs/HelloWorld.spec.js
  HelloWorld.vue
    ✕ should render correct contents (14ms)

  ● HelloWorld.vue › should render correct contents

    TypeError: Cannot read property 'querySelector' of undefined

       6 |     const Constructor = Vue.extend(HelloWorld);
       7 |     const vm = new Constructor().$mount();
    >  8 |     expect(vm.$el.querySelector('.hello h1').textContent)
       9 |       .toEqual('Welcome to Your Vue.js App');
      10 |   });
      11 | });

      at Object.querySelector (test/unit/specs/HelloWorld.spec.js:8:19)

But when I add the testURL: 'http://localhost' as @scriada suggest everything runs fine.