Jest SecurityError: localStorage ist für undurchsichtige Ursprünge nicht verfügbar

144

Wenn ich mein Projekt mit dem Befehl ausführen möchte, wird npm run testder folgende Fehler angezeigt. Was verursacht das?

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

— amirdehghan
quelle

Wie greifen Sie auf Ihre Anwendung zu? .. Ich meine, greifen Sie wie folgt darauf zu http://localhost:port...?

— David R

Dies ist ein Problem mit dem Testläufer @DavidR. Er hat ein Problem mit dem >>> npm-

— Lauftest

@ MartinChaov Yup das weiß ich. Ich würde gerne seine Antwort sehen, um zu überprüfen, ob etwas in seiner jestKonfiguration nicht stimmt :-)

— David R

1

Ich bin gerade selbst darauf gestoßen ... Ich verwende im Code überhaupt keinen lokalen Speicher. Verwendet Ihr Code auch ts-jest?

— k2snowman69

@ k2snowman69 Bitte überprüfe meine Antwort und poste deinen Kommentar.

— David R

139

Falls Sie mit einem http://localhostPräfix auf Ihre Anwendung zugreifen , müssen Sie Ihre Scherzkonfiguration (in Ihrer jest.config.js) wie folgt aktualisieren :

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

Falls Sie noch keine Scherzkonfiguration haben, fügen Sie einfach die Konfiguration in Ihre ein package.json. Beispielsweise:

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

oder in jest.config.js:

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

oder wenn Sie projectskonfiguriert haben:

module.exports = {
  verbose: true,

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

    // ...
  }]
}

— David R.
quelle

17

Ja, das hat bei mir funktioniert ... obwohl ich nicht ganz verstehe, warum ich das brauche oder warum es vor dem letzten Upgrade

— funktioniert hat

1

Dies wird auf der jestGithub-Seite besprochen : github.com/facebook/jest/issues/6766

— Jordan Bonitatis

2

Sie können auch die Option cli in Ihrem npm-Skript verwenden : jest --testURL=\"http://localhost\". Nützlich, wenn Sie aufgrund einer anderen Umgebung keine globale Scherzkonfiguration festlegen können (React-Skripte für mich).

— Burrich

Ich arbeite daran, native zu reagieren. Auch für mich hat testUrlgearbeitet.

— Jimit Patel

78

Ich hatte gerade dieses Auftauchen in einem großen Monorepo (in Unit-Tests hätte das sonst kein jsdom erfordert). Das explizite Festlegen von Folgendem in unserem jest.config.js(oder einem package.jsongleichwertigen) Beispiel hat dieses Problem ebenfalls behoben:

module.exports = {
  testEnvironment: 'node'
}

Update: Wie Nicolas unten erwähnt hat (danke!), Können Sie auch die folgenden Flags hinzufügen, wenn Sie keine Konfigurationsdateien verwenden:

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

— Burgi
quelle

3

Das hat bei mir funktioniert! DAS ist die Antwort, die Sie brauchen! Vielen Dank!

— Blueprintchris

Es scheint, dass der Autor keine Knotenumgebung hat - in seinem Fall sollte er testEnvironment setzen: "jsdom". Dies funktioniert bei mir mit dem neuesten Update. Danke für deinen Rat!

— Philipp Möhler

3

Wie in einigen anderen Antworten unten erwähnt, können Sie die Generierung einer Konfigurationsdatei (oder der package.json-Eigenschaft) überspringen, indem Sie jest --testEnvironment nodeoder deren Kurzform jest --env=nodeintead ausführen.

— Nicolás Fantone

2

Dies sollte die akzeptierte Antwort sein. Es scheint angemessener für den Fehler. Auch wenn Sie nur Skripte testen, ist es nicht sinnvoll, a zu definieren testURL.

— Dezember

16

Sie müssen angeben, welche Umgebung (--env ) Sie verwenden möchten.

Wenn Sie den jestBefehl in ausführen package.json, sollten Sie die Umgebung ( jsdomoder node) angeben . Beispielsweise:

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

Das sollte für dich funktionieren!

— Manuel Morejón
quelle

1

Wenn Sie jsdom verwenden, geschieht dasselbe, unabhängig davon, ob Sie eine envVia-Konfiguration oder eine Befehlszeile angeben . Dies begann erst mit dem neuesten Update von jest heute. In der Antwort von @David R finden Sie eine Lösung, falls dies bei Ihnen der Fall ist.

— fisch2

7

Wenn Sie jsdom verwenden, stellen Sie sicher, dass Sie die URL angeben.

Checkout jsdom Repository einfache Optionen. https://github.com/jsdom/jsdom#simple-options

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

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

— p8ul
quelle

In meinem Fall habe ich diesen Code in meine jsdom-Konfigurationsdatei eingefügt.

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 Obwohl dies nicht speziell für Jest gilt, ist dies eine alternative Lösung und kann für andere Setups verwendet werden (da dies die oberste SO für den Fehlercode ist, finden andere, wie ich, diese Seite, die Jest nicht verwenden) Per @ dspacejs gute Frage, dies wäre eine separate Datei, die über Ihren Testbefehl in aufgerufen wird package.json. Zum Beispiel könnte dieser Code in einer testHelper.tsDatei gespeichert und mit Mokka aufgerufen werden :

scripts: { test-setup: 'mocha --compilers ts:ts-node/register,tsx:ts-nocde/register --require testHelper.ts --reporter progress' }

.

— Jmbertucci

4

Der Vorschlag in der am besten bewerteten Antwort testURL: "http://localhost", meiner Jest-Konfiguration etwas hinzuzufügen , hat bei mir nicht funktioniert. Dieser Vorschlag aus der jsdom GitHub-Diskussion , beim Erstellen des jsdom-Objekts eine URL einzugeben, hat sich jedoch bewährt.

const url = 'http://localhost';

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

— Scott Martin
quelle

1

Für mich wurde dies durch ein Upgrade auf "jest" gelöst: "^ 24.9.0",

— Mike Rodov
quelle

0

Das mag albern klingen, aber für mich wurde das Problem verursacht, weil ich versehentlich zufällige Pakete mit installiert hatte npm update. Ich rannte npm installund dann, npm updateaber ich hätte nur rennen sollen npm install. Ich habe das Problem behoben, indem ich das node_modulesVerzeichnis gelöscht und npm installerneut ausgeführt habe.

— Rock Lee
quelle

Dies bezieht sich auf mich, ich konnte npm installaufgrund von Enterprise-Proxy nicht richtig fertig werden. So würde das Muster unvollendet sein npm installation

— Z. Khullah

0

Während der Arbeit mit React JS müssen Sie nichts tun. Es ist das Standardverhalten der Create-React-App, JEST zu platzieren und eine Testumgebung einzurichten. Beim Ausführen von unten wird der Erfolg oder Misserfolg des Tests angezeigt.

npm Test

Wenn Sie eine Testabdeckung wünschen, müssen Sie lediglich die Datei package.json hinzufügen

"test": "react-scripts test --coverage" Jetzt sieht Ihr "script" von package.json so aus:

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

}}

— Amjad Khan
quelle

0

Dies tauchte bei mir bei der Integration enzymemit auf jest. Die Github-Problemdiskussion schlägt dasselbe wie oben erwähnt vor, nämlich das Hinzufügen

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

zur Scherzkonfiguration. Es ist jedoch gut zu wissen, dass dies auch durch Enzyme ausgelöst wird. Für mich war es React v15 und der v15-Adapter.

— pascalwhoop
quelle

0

Ich habe das gleiche Problem und das Einfügen in meine package.jsonDatei hat bei mir funktioniert:

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

— Zahid Ali
quelle

0

Um den Jest SecurityError: localStorageFehler jest: { ... }zu beheben, müssen Sie das Teil Ihrer Datei package.json hinzufügen

{

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

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

}

— Eugène Beliaev
quelle