Jest SecurityError: localStorage nie jest dostępna dla nieprzezroczystych źródeł

144

Kiedy chcę uruchomić projekt za pomocą polecenia npm run test, pojawia się poniższy błąd. Co jest tego przyczyną?

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
źródło
Jak uzyskujesz dostęp do swojej aplikacji? .. To znaczy, czy uzyskujesz do niej dostęp na przykład http://localhost:port...,?
David R
To jest problem z biegaczem testów, @DavidR, ma problem z >>> npm uruchom test <<<
Martin Chaov
@MartinChaov Tak, wiem to. Chciałbym zobaczyć jego odpowiedź, aby sprawdzić, czy coś jest nie tak w jego jestkonfiguracji :-)
David R
1
Właśnie zacząłem się na to natrafiać ... W ogóle nie używam lokalnego magazynu w kodzie. Czy Twój kod również używa ts-jest?
k2snowman69
@ k2snowman69 Sprawdź moją odpowiedź i zamieść swój komentarz.
David R,

Odpowiedzi:

139

W przypadku, gdy uzyskujesz dostęp do swojej aplikacji z http://localhostprefiksem, musisz zaktualizować konfigurację jest (w swojej jest.config.js) jako,

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

W przypadku, gdy nie masz jeszcze żadnej konfiguracji jest, po prostu dołącz ją do swojego package.json. Na przykład:

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

lub w jest.config.js:

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

lub jeśli projectsskonfigurowałeś:

module.exports = {
  verbose: true,

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

    // ...
  }]
}
David R.
źródło
17
Tak, to zadziałało dla mnie ... chociaż nie bardzo rozumiem, dlaczego tego potrzebuję, ani dlaczego działało przed najnowszą aktualizacją
k2snowman69
1
Jest to omówione na jeststronie github: github.com/facebook/jest/issues/6766
Jordan Bonitatis
2
Można także użyć opcji cli w npm skryptu: jest --testURL=\"http://localhost\". Przydatne, jeśli nie możesz ustawić globalnej konfiguracji żartów z powodu innego środowiska (skrypty reagujące dla mnie).
Brus
Pracuję nad React Native. Nawet dla mnie testUrldziałało.
Jimit Patel,
78

Właśnie to pojawiło się w dużym monorepo (w testach jednostkowych, które w przeciwnym razie nie wymagałyby jsdom). Jawne ustawienie następujących w naszym jest.config.js(lub package.jsonodpowiedniku) również rozwiązało ten problem:

module.exports = {
  testEnvironment: 'node'
}

Aktualizacja: Jak wspomniał Nicolas poniżej (dzięki!), Możesz również dodać następujące flagi, jeśli nie używasz żadnych plików konfiguracyjnych:

jest --testEnvironment node    
# or 
jest --env=node
Burgi
źródło
3
To zadziałało dla mnie! TO jest odpowiedź, której potrzebujesz! Dzięki!
blueprintchris
Wygląda na to, że autor nie ma środowiska węzłowego - w jego przypadku powinien ustawić testEnvironment: "jsdom". To działa dla mnie z najnowszą aktualizacją. Dzięki za radę!
Philipp Möhler
3
Jak wspomniano w niektórych innych odpowiedziach poniżej, możesz pominąć generowanie pliku konfiguracyjnego (lub właściwości package.json), uruchamiając jest --testEnvironment nodelub jego skrót jest --env=nodeintead.
Nicolás Fantone
2
To powinna być akceptowana odpowiedź. Wydaje się bardziej odpowiednie dla błędu. Również jeśli testujesz tylko skrypty, nie ma sensu definiować pliku testURL.
Dez
16

Musisz określić, jakiego środowiska ( --env) zamierzasz używać.

Po uruchomieniu jestpolecenia w programie package.jsonnależy określić środowisko ( jsdomlub node). Na przykład:

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

To powinno działać dla Ciebie!

Manuel Morejón
źródło
1
Jeśli używasz jsdom, to samo dzieje się niezależnie od tego, czy określisz za envpomocą konfiguracji, czy wiersza poleceń. Zaczęło się to dziać dopiero dzisiaj od najnowszej aktualizacji jest. Zapoznaj się z odpowiedzią @David R., aby uzyskać rozwiązanie, jeśli tak jest w Twoim przypadku.
fisch2
7

Jeśli używasz jsdom, upewnij się, że dołączasz url.

Proste opcje repozytorium jsdom Checkout. https://github.com/jsdom/jsdom#simple-options

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

const dom = new JSDOM(`...`, { url: "https://example.org/" });
p8ul
źródło
W moim przypadku dodałem ten kod w moim pliku konfiguracyjnym 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 Chociaż nie jest to konkretnie dotyczące Jest, jest to rozwiązanie alternatywne i może być używane w innych konfiguracjach (ponieważ jest to najwyższy SO dla kodu błędu, inni, jak ja, znajdą tę stronę, którzy nie używają Jest) Per @ dspacejs dobre pytanie, byłby to osobny plik wywoływany za pomocą polecenia testowego w package.json. Na przykład, ten kod może zostać zapisany w testHelper.tspliku o nazwie i używając mocha: scripts: { test-setup: 'mocha --compilers ts:ts-node/register,tsx:ts-nocde/register --require testHelper.ts --reporter progress' }.
jmbertucci
4

Sugestia w najwyżej ocenianej odpowiedzi dodania testURL: "http://localhost"do mojej konfiguracji Jest nie zadziałała dla mnie. Jednak ta sugestia z dyskusji na temat jsdom GitHub , dotycząca przekazywania adresu URL podczas tworzenia obiektu jsdom, sprawdziła się.

const url = 'http://localhost';

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { url });
Scott Martin
źródło
1

dla mnie problem ten został rozwiązany poprzez uaktualnienie do "jest": "^ 24.9.0",

Mike Rodov
źródło
0

Może to zabrzmieć głupio, ale dla mnie problem był spowodowany tym, że omyłkowo zainstalowałem przypadkowe pakiety z npm update. Biegałem npm installi wtedy, npm updateale powinienem był tylko biec npm install. Naprawiłem problem, usuwając node_moduleskatalog i uruchamiając npm installponownie.

Rock Lee
źródło
Dotyczy to mnie, właściwie nie byłem w stanie ukończyć npm installpoprawnie z powodu korporacyjnego proxy. Tak więc, wzór będzie niezrealizowane npm installacji
Z. Khullah
0

Podczas pracy z React JS nie musisz nic robić. Domyślnym zachowaniem aplikacji create-react-app jest umieszczanie JEST i konfigurowanie środowiska testowego. Po uruchomieniu poniżej zaczyna pokazywać sukces lub porażkę testu,

npm test

Jeśli chcesz pokryć test, wystarczy dodać poniżej do pliku package.json

"test": "react-scripts test --coverage" Teraz twój "skrypt" pliku package.json wygląda tak,

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

}

Amjad Khan
źródło
0

Pojawiło się to we mnie podczas integracji enzymez jest. Dyskusja Github Problem wskazują takie same, jak wspomniano powyżej, a mianowicie dodawanie

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

do konfiguracji jest. Jednak dobrze jest wiedzieć, że jest to wyzwalane również przez enzym. Dla mnie był to React v15 i adapter v15.

pascalwhoop
źródło
0

Mam ten sam problem i umieszczenie tego w moim package.jsonpliku zadziałało:

"jest": {
    "verbose": true,
    "testURL": "http://localhost/"
}
Zahid Ali
źródło
0

Aby rozwiązać problem Jest SecurityError: localStorage, musisz dodać jest: { ... }część do pliku package.json

{

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

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

}
Eugène Beliaev
źródło