Jest SecurityError : 불투명 한 출처에 대해 localStorage를 사용할 수 없습니다


144

명령으로 프로젝트를 실행 npm run test하려면 아래 오류가 발생합니다. 이 원인은 무엇입니까?

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

응용 프로그램에 어떻게 액세스합니까? .. 내 말은, 당신은 그것을 좋아 http://localhost:port...합니까?
David R

이것은 그는 <<< >>> NPM 실행 테스트와 문제를 가지고 시험 주자, @DavidR에 문제가
마틴 Chaov

@MartinChaov 예, 알고 있습니다. 그의 jest설정에 문제가 있는지 확인하기 위해 그의 답변을보고 싶습니다 :-)
David R

1
방금이 문제를 시작했습니다 ... 코드에서 전혀 로컬 저장소를 사용하지 않습니다. 코드에서 ts-jest를 사용하고 있습니까?
k2snowman69

@ k2snowman69 내 답변을 확인하고 의견을 게시하십시오.
David R

답변:


139

http://localhost접두사를 사용 하여 애플리케이션에 액세스하는 경우 다음과 같이 jest 구성 ()을 업데이트해야합니다 jest.config.js.

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

jest 구성이없는 경우 구성을 포함하십시오 package.json. 예를 들면 다음과 같습니다.

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

또는 jest.config.js:

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

또는 projects구성한 경우 :

module.exports = {
  verbose: true,

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

    // ...
  }]
}

17
그러나 이것은 나를 위해 일했습니다 ... 왜 이것이 필요한지 또는 최신 업그레이드 전에 왜 작동했는지 이해가되지 않습니다
k2snowman69

1
이것은에서 설명 jestGitHub의 페이지 : github.com/facebook/jest/issues/6766를
요르단 Bonitatis을

2
npm 스크립트에서 cli 옵션을 사용할 수도 있습니다 jest --testURL=\"http://localhost\". 다른 환경으로 인해 글로벌 jest 구성을 설정할 수없는 경우에 유용합니다 (나에게 맞는 스크립트).
Burrich

나는 네이티브 반응을 위해 노력하고 있습니다. 심지어 나를 testUrl위해 일했다.
Jimit Patel

78

방금 큰 monorepo에서 자랐습니다 (단위 테스트에서는 그렇지 않으면 jsdom이 필요하지 않았습니다). 우리 jest.config.js(또는 package.json동등한 것) 에서 다음을 명시 적으로 설정하면 해당 문제가 완화되었습니다.

module.exports = {
  testEnvironment: 'node'
}

업데이트 : Nicolas가 아래에 언급 한 것처럼 (감사합니다!) 구성 파일을 사용하지 않는 경우 다음 플래그를 추가 할 수도 있습니다.

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

3
이것은 나를 위해 일했다! 이것이 당신이 필요로하는 답변입니다! 감사!
blueprintchris

저자는 노드 환경을 가지고 있지 않은 것 같습니다. 그의 경우에는 testEnvironment : "jsdom"을 설정해야합니다. 이것은 최신 업데이트로 저에게 효과적입니다. 조언 해 주셔서 감사합니다!
Philipp Möhler

3
아래의 다른 답변에서 언급했듯이 설정 jest --testEnvironment node또는 속기 jest --env=nodeintead를 실행하여 구성 파일 (또는 package.json 속성) 생성을 건너 뛸 수 있습니다 .
Nicolás Fantone

2
이것이 정답입니다. 오류에 더 적합한 것 같습니다. 또한 스크립트 만 테스트하는 경우을 정의하는 것은 의미가 없습니다 testURL.
Dez

16

--env사용할 환경 ( )을 지정해야합니다 .

에서 jest명령 을 실행할 때 package.json환경 ( jsdom또는 node)을 지정해야합니다 . 예를 들면 다음과 같습니다.

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

이것은 당신을 위해 작동합니다!


1
jsdom을 사용하는 경우 envvia 구성 또는 명령 줄 을 지정하는지 여부에 관계없이 동일한 작업이 수행 됩니다. 이것은 오늘 jest의 최신 업데이트로 시작되었습니다. 이 경우 솔루션에 대한 @David R의 답변을 참조하십시오.
fisch2

7

jsdom을 사용하는 경우 url을 포함해야합니다.

jsdom 저장소 간단한 옵션을 체크 아웃하십시오. https://github.com/jsdom/jsdom#simple-options

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

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

제 경우에는 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 Jest에 대해 구체적으로 설명하지는 않았지만이 방법은 대체 솔루션이며 다른 설정에 사용될 수 있습니다 (오류 코드의 최상위 SO이므로 저와 같이 Jest를 사용하지 않는이 페이지를 찾을 수 있기 때문에) Per @ dspacejs 좋은 질문입니다.이 파일은의 테스트 명령을 통해 호출되는 별도의 파일입니다 package.json. 예 testHelper.ts를 들어이 코드는 파일에 저장하고 mocha :를 사용하여 호출 할 수 있습니다 scripts: { test-setup: 'mocha --compilers ts:ts-node/register,tsx:ts-nocde/register --require testHelper.ts --reporter progress' }.
jmbertucci

4

testURL: "http://localhost"Jest 구성 에 추가하는 최상위 답변의 제안이 효과가 없었습니다. 그러나 jsdom 객체를 만들 때 URL을 전달한다는 jsdom GitHub 토론의 제안이있었습니다 .

const url = 'http://localhost';

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


0

이것은 어리석은 소리가 들릴 수 있지만 실수로와 함께 임의의 패키지를 설치했기 때문에 문제가 발생했습니다 npm update. 내가 실행 한 npm install후, npm update그러나 나는 단지 실행해야 npm install. node_modules디렉토리 를 삭제 하고 npm install다시 실행 하여 문제를 해결했습니다 .


이것은 나와 관련이 있습니다. 실제로 npm install엔터프라이즈 프록시로 인해 제대로 완료 되지 못했습니다 . 따라서, 패턴은되지 않은 것 npm installATION을
Z. Khullah

0

React JS로 작업하는 동안 아무 것도 할 필요가 없습니다. JEST를 배치하고 테스트 환경을 설정하는 것은 create-react-app의 기본 동작입니다. 아래를 실행하면 테스트 성공 또는 실패 표시가 시작됩니다.

NPM 테스트

테스트 범위를 원한다면 package.json 파일에 아래를 추가하면됩니다.

"test": "react-scripts test --coverage"이제 package.json의 "script"는 다음과 같습니다.

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

}


0

통합 할 때이 나와 함께 팝업 enzyme으로 jest. Github의 문제 토론 전술 한 바와 같이, 즉 추가 같은 제안

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

jest 구성에. 그러나 이것이 효소에 의해서도 유발된다는 것을 아는 것이 좋습니다. 나에게 그것은 React v15와 v15 어댑터였습니다.


0

나는 같은 문제가 있으며 이것을 내 package.json파일에 넣으면 나를 위해 일했다.

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

0

Jest SecurityError: localStorage오류 를 해결하려면 package.json 파일에 jest: { ... }부품을 추가해야 합니다

{

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

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

}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.