IT박스

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

itboxs 2020. 6. 22. 08:07
반응형

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


명령으로 프로젝트를 실행하려고 할 때 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접두사를 사용 하여 애플리케이션에 액세스하는 경우 다음과 같이 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/",

    // ...
  }]
}

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

module.exports = {
  testEnvironment: 'node'
}

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

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

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

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

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

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


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

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

const url = 'http://localhost';

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

This may sound silly, but for me, the problem was caused because I had mistakenly installed random packages with npm update. I was running npm install and then npm update but I should have only ran npm install. I fixed the problem by deleting node_modules directory and running npm install again.


You do not need to do anything while working with React JS. It is default behavior of the create-react-app to place JEST and setting up testing environment. On running of below,it start showing the test success or fail,

npm test

In case you want test coverage, you simply need to add below to package.json file

"test": "react-scripts test --coverage" Now your "script" of package.json look like,

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

}


This popped up with me when integrating enzyme with jest. The Github Issue Discussion suggests the same as noted above, namely adding

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

to the jest config. However, it's good to know that this is triggered also by enzyme. For me it was React v15 and the v15 adapter.

참고URL : https://stackoverflow.com/questions/51554366/jest-securityerror-localstorage-is-not-available-for-opaque-origins

반응형