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

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/",

    // ...
  }]
}

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

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!


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/" });

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

1

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


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.


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"

}


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.


0

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

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

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/" },

}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.