Jest SecurityError: localStorage n'est pas disponible pour les origines opaques


144

Lorsque je veux exécuter mon projet avec la commande npm run test, j'obtiens l'erreur ci-dessous. Qu'est-ce qui cause cela?

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

Comment accédez-vous à votre application? .. Je veux dire, y accédez-vous comme http://localhost:port...,?
David R

C'est un problème avec le testeur, @DavidR, il a un problème avec >>> npm run test <<<
Martin Chaov

@MartinChaov Oui, je le sais. Je voudrais voir sa réponse afin de vérifier si quelque chose ne va pas dans sa jestconfig :-)
David R

1
Je viens de commencer à rencontrer cela moi-même ... Je n'utilise pas du tout de stockage local dans le code. Votre code utilise-t-il également ts-jest?
k2snowman69

@ k2snowman69 Veuillez vérifier ma réponse et poster votre commentaire.
David R

Réponses:


139

Dans le cas où, si vous accédez à votre application avec un http://localhostpréfixe, vous devez mettre à jour votre configuration jest (dans votre jest.config.js) comme,

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

Si vous n'avez pas encore de configuration plaisante, incluez simplement la configuration dans votre fichier package.json. Par exemple:

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

ou en jest.config.js:

module.exports = {
  verbose: true,
  testURL: "http://localhost/",
  ...
}

ou si vous avez projectsconfiguré:

module.exports = {
  verbose: true,

  projects: [{
    runner: 'jest-runner',
    testURL: "http://localhost/",

    // ...
  }]
}

17
Oui, cela a fonctionné pour moi ... même si je ne comprends pas très bien pourquoi j'en ai besoin ni pourquoi cela fonctionnait avant la dernière mise à jour
k2snowman69

1
Ceci est discuté dans la jestpage github: github.com/facebook/jest/issues/6766
Jordan Bonitatis

2
Vous pouvez également utiliser l'option cli dans votre script NPM: jest --testURL=\"http://localhost\". Utile si vous ne pouvez pas définir une configuration de plaisanterie globale à cause d'un autre environnement (react-scripts pour moi).
Burrich

Je travaille sur react native. Même pour moi a testUrltravaillé.
Jimit Patel

78

Je viens de l'avoir dans un grand monorepo (dans les tests unitaires, qui autrement n'auraient pas nécessité jsdom). La définition explicite de ce qui suit dans notre jest.config.js(ou l' package.jsonéquivalent) a également atténué ce problème:

module.exports = {
  testEnvironment: 'node'
}

Mise à jour: Comme Nicolas l'a mentionné ci-dessous (merci!), Vous pouvez également ajouter les indicateurs suivants si vous n'utilisez aucun fichier de configuration:

jest --testEnvironment node    
# or 
jest --env=node

3
Cela a fonctionné pour moi! CECI est la réponse dont vous avez besoin! Merci!
blueprintchris

Il semble que l'auteur n'ait pas d'environnement de nœud - dans son cas, il devrait définir testEnvironment: "jsdom". Cela fonctionne pour moi avec la dernière mise à jour. Merci pour vos conseils!
Philipp Möhler

3
Comme mentionné dans d'autres réponses ci-dessous, vous pouvez ignorer la génération d'un fichier de configuration (ou de la propriété package.json) en exécutant jest --testEnvironment nodeou son raccourci jest --env=node, intead.
Nicolás Fantone

2
Cela devrait être la réponse acceptée. Cela semble plus approprié pour l'erreur. De plus, si vous testez uniquement des scripts, cela n'a aucun sens de définir un fichier testURL.
Dez

16

Vous devez spécifier quel environnement (--env ) que vous allez utiliser.

Lorsque vous exécutez la jestcommande dans le, package.jsonvous devez spécifier l'environnement ( jsdomou node). Par exemple:

  "scripts": {
    "jest": "jest --env=node --colors --coverage test",
    "test": "npm run jest"
  },

Cela devrait fonctionner pour vous!


1
Si vous utilisez jsdom, la même chose se produit, que vous spécifiiez ou non un envvia config ou une ligne de commande. Cela n'a commencé à se produire qu'avec la dernière mise à jour de jest aujourd'hui. S'il vous plaît voir la réponse de @David R pour une solution si c'est le cas pour vous.
fisch2

7

Si vous utilisez jsdom, assurez-vous d'inclure url.

Découvrez les options simples du référentiel jsdom. https://github.com/jsdom/jsdom#simple-options

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const dom = new JSDOM(`...`, { url: "https://example.org/" });

Dans mon cas, j'ai ajouté ce code dans mon fichier de configuration jsdom. var jsdom = require('jsdom'); var exposedProperties = ['window', 'navigator', 'document']; const { JSDOM } = jsdom; const {document } = (new JSDOM('',{ url: "https://localhost/",})).window; global.document = document;
p8ul

+1 Bien qu'il ne s'agisse pas spécifiquement de Jest, il s'agit d'une solution alternative et pourrait être utilisée pour d'autres configurations (puisque c'est le top SO pour le code d'erreur, d'autres, comme moi, trouveront cette page qui n'utilise pas Jest) Par @ dspacejs bonne question, ce serait un fichier séparé qui est appelé via votre commande de test dans package.json. Par exemple, ce code pourrait être enregistré dans un testHelper.tsfichier et appelé à l' aide mocha: scripts: { test-setup: 'mocha --compilers ts:ts-node/register,tsx:ts-nocde/register --require testHelper.ts --reporter progress' }.
jmbertucci

4

La suggestion dans la réponse la mieux notée d'ajouter testURL: "http://localhost"à ma configuration Jest n'a pas fonctionné pour moi. Cependant, cette suggestion de la discussion jsdom GitHub , consistant à passer une URL lors de la création de l'objet jsdom, l'a fait.

const url = 'http://localhost';

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { url });

1

pour moi, cela a été résolu en passant à "jest": "^ 24.9.0",


0

Cela peut sembler idiot, mais pour moi, le problème était dû au fait que j'avais installé par erreur des packages aléatoires avec npm update. Je courais npm installet puis npm updatej'aurais dû seulement courir npm install. J'ai résolu le problème en supprimant le node_modulesrépertoire et en exécutant à npm installnouveau.


Cela me concerne, je n'ai pas pu terminer npm installcorrectement en raison du proxy d'entreprise. Ainsi, le modèle serait inachevé npm installation
Z. Khullah

0

Vous n'avez rien à faire lorsque vous travaillez avec React JS. Le comportement par défaut de create-react-app consiste à placer JEST et à configurer l'environnement de test. Lors de l'exécution de ci-dessous, il commence à montrer le succès ou l'échec du test,

test npm

Si vous souhaitez une couverture de test, vous devez simplement ajouter ci-dessous au fichier package.json

"test": "react-scripts test --coverage" Maintenant, votre "script" de package.json ressemble à,

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --coverage",
"eject": "react-scripts eject"

}


0

Cela m'est apparu lors de l'intégration enzymeavec jest. La discussion sur la question Github suggère la même chose que celle indiquée ci-dessus, à savoir l'ajout

"testURL": "http://localhost/"

à la config de plaisanterie. Cependant, il est bon de savoir que cela est également déclenché par l'enzyme. Pour moi, c'était React v15 et l'adaptateur v15.


0

J'ai le même problème et placer ceci dans mon package.jsonfichier a fonctionné pour moi:

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

0

Pour résoudre l' Jest SecurityError: localStorageerreur, vous devez ajouter la jest: { ... }pièce à votre fichier package.json

{

"name": "...",
"version": "..",
"main": "..",
"description": "...",
...

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

}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.