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

— 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,

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