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>)
37570 次浏览
小开

如果使用 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/",


// ...
}]
}

对于 package.json中的配置，在 jest v28中删除 testURL。现在您应该使用 testEnvironment 选项来像这样传递 url 选项:

"jest": {
"verbose": true,
"testEnvironmentOptions": {
"url": "http://localhost/"
}
}
小开

我只是在一个大的 monorepo (在单元测试中，否则不会需要 jsdom)中突然出现了这个问题。在我们的 jest.config.js(或等效的 package.json)中明确设置以下内容也缓解了这个问题:

module.exports = {
testEnvironment: 'node'
}

更新: 正如 Nicolas 在下面提到的(谢谢!) ，如果你没有使用任何配置文件，你也可以添加以下标志:

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

您必须指定要使用的环境(--env)。

在 package.json中运行 jest命令时，应该指定环境(jsdom或 node)。例如:

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

这应该对你有用！

小开

如果使用 jsdom，请确保包含 url。

检查 jsdom 存储库的简单选项

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


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

这听起来可能有点傻，但对我来说，问题是由于我错误地用 npm update安装了随机的软件包造成的。我运行的是 npm install，然后是 npm update，但我应该只运行 npm install。我通过删除 node_modules目录并再次运行 npm install修复了这个问题。

小开

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

Npm 测试

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

“测试”: “反应脚本测试——覆盖” 现在你的 package.json“脚本”看起来像,

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

}

小开

在我的 Jest 配置中添加 testURL: "http://localhost"这个顶级答案中的建议对我来说不起作用。但是，在创建 jsdom 对象时传递 URL 的 来自 jsdom GitHub 讨论的建议做到了这一点。

const url = 'http://localhost';


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

当我把 enzyme和 jest结合起来的时候，这个问题出现了。 Github 问题讨论建议和上面提到的一样，即加

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

到开玩笑的配置。然而，很高兴知道这也是由酶触发的。对我来说，它是反应15版本和15版本的适配器。

小开

对我来说，这个问题通过升级到“开玩笑”解决了: “ ^ 24.9.0”,

小开

我有同样的问题，把这个放在我的 package.json文件为我工作:

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

要解决 Jest SecurityError: localStorage错误，您需要将 jest: { ... }部分添加到 包裹 Json文件中

{


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


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


}
小开

如果您正在使用 jsdom，那么您必须更改您的测试设置，如下所示:

const { JSDOM } = require('jsdom');
const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
url: 'http://localhost/',
});```
小开

这个问题发生在我将 jest 更新到 v28.0.3时。 似乎在28.0.0版本中，他们废弃了 testUrl，并引入了一个带有属性 url 的对象 testEnvironment/Options，其默认值为“ http://localhost/”。

弃用警告:

选项“ testURL”被替换为通过 “ testEnvironment Options.url”。

请更新您的配置。

配置文档: https://jestjs.io/docs/configuration

检查这里的公关: https://github.com/facebook/jest/pull/10797

但是，当我更新 jest-Environment-jsdom 并在 jest.config.js 中设置 testEnvironment 时，我的问题就消失了。

module.exports = {
...
testEnvironment: 'jest-environment-jsdom',
...
}
小开

我有同样的问题和手动安装 jest-environment-jsdom版本28(基于 这个 GitHub 的帖子)解决了它。


提交答案