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>)
javascript node.js npm jestjs Amirdehghan
la source
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/",

    // ...
  }]
}
David R
la source
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
Burgi
la source
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!

Manuel Morejón
la source
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/" });
p8ul
la source
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 });
Scott Martin
la source
1

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

Mike Rodov
la source
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.

Rock Lee
la source
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"

}

Amjad Khan
la source
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.

pascalwhoop
la source
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/"
}
Zahid Ali
la source
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/" },

}
Eugène Beliaev
la source