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

— 阿米尔德汉
source

您如何访问您的应用程序？..我的意思是，您是否正在访问它http://localhost:port...？

— David R

这是测试运行程序@DavidR的问题，他有>>> npm运行测试问题<<<

— Martin Chaov，

@MartinChaov是的，我知道。我想看看他的答复，以便检查他的jest配置中是否有问题：-)

— David R

1

我刚刚开始自己遇到这个问题……我根本没有在代码中使用本地存储。您的代码也使用ts-jest吗？

— k2snowman69 '18

@ k2snowman69请检查我的回答并发表您的评论。

— David R

139

万一您要使用http://localhost前缀访问您的应用程序，则需要更新jest配置（在中jest.config.js）为，

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

如果您还没有任何玩笑的配置，只需在中包含该配置即可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/",

    // ...
  }]
}

— 戴维·R
source

17

是的，它为我工作了……尽管我不太明白为什么我需要它，或者为什么它在最新升级之前没有起作用

— k2snowman69 '18

1

这在jestgithub页面上讨论：github.com/facebook/jest/issues/6766

— Jordan Bonitatis

2

你也可以用你的NPM脚本的命令行选项：jest --testURL=\"http://localhost\"。如果由于另一个环境而无法设置全局Jest配置，则很有用（对我来说是反应脚本）。

— 伯里奇

我正在研究本机。甚至为我testUrl工作。

— Jimit Patel

78

我只是在一个大型monorepo中进行了这种处理（在单元测试中，否则不需要jsdom）。在我们jest.config.js（或package.json同等产品）中明确设置以下内容也可以缓解该问题：

module.exports = {
  testEnvironment: 'node'
}

更新：正如下面的Nicolas提到的（谢谢！），如果您不使用任何配置文件，也可以添加以下标志：

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

— 布吉
source

3

这对我有用！这就是您需要的答案！谢谢！

— blueprintchris

看来作者没有节点环境-在他的情况下，他应该设置testEnvironment：“ jsdom”。最新的更新对我有用。谢谢你的建议！

— 菲利普·莫勒（PhilippMöhler）

3

如下面其他一些答案所述，您可以通过运行jest --testEnvironment node或简写jest --env=nodeintead 跳过配置文件（或package.json属性）的生成。

— 尼古拉斯Fantone

2

这应该是公认的答案。似乎更适合该错误。另外，如果您仅测试脚本，则定义testURL。

— Dez

16

您必须指定--env要使用的环境（）。

在中运行jest命令时，package.json应指定环境（jsdom或node）。例如：

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

这应该为您工作！

— 曼努埃尔·莫雷洪（ManuelMorejón）
source

1

如果您使用的是jsdom，则无论是否env通过via config或命令行指定，都会发生相同的情况。这只是从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/" });

— 8
source

就我而言，我在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，但它是一种替代解决方案，可以用于其他设置（因为这是错误代码的顶部，因此其他人，例如我，会发现此页面未使用Jest）Per @ dspacejs是个好问题，这将是一个单独的文件，该文件通过中的test命令调用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 GitHub讨论的建议是在创建jsdom对象时传递URL。

const url = 'http://localhost';

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

— 斯科特·马丁
source

1

对我来说，这是通过升级到“ jest”：“ ^ 24.9.0”解决的，

— 麦克·罗多夫
source

0

这听起来可能很愚蠢，但是对我来说，问题是由于我错误地使用安装了随机软件包而引起的npm update。我当时正在跑步npm install，npm update但我只应该跑步npm install。我通过删除node_modules目录并npm install再次运行来解决该问题。

— 李洛克
source

这与我有关，实际上npm install由于企业代理，我无法正常完成。因此，该模式将未完成的npm install通货膨胀

— Z. Khullah

0

使用React JS时不需要做任何事情。放置JEST和设置测试环境是create-react-app的默认行为。在下面的运行中，它开始显示测试成功或失败，

npm测试

如果您想要测试覆盖率，只需将以下内容添加到package.json文件中

“ test”：“ react-scripts test --coverage”现在您的package.json的“脚本”看起来像，

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

}

— 阿姆贾德·汗（Amjad Khan）
source

0

与整合时enzyme，这点对我突然弹出jest。在Github上的问题探讨表明同上面提到的，即增加

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

开玩笑的配置。但是，很高兴知道这也是由酶触发的。对我来说是React v15和v15适配器。

— pascalwhoop
source

0

我有同样的问题，将其放在package.json文件中对我来说很有效：

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

— 扎希德·阿里（Zahid Ali）
source

0

要解决该Jest SecurityError: localStorage错误，您需要将jest: { ... }零件添加到package.json文件中

{

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

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

}

— 欧仁·别利亚耶夫（EugèneBeliaev）
source