Javascript 如何使用jest配置jsdom_Javascript_Reactjs_Jestjs_Jsdom

Javascript 如何使用jest配置jsdom

javascript reactjs jestjs

Javascript 如何使用jest配置jsdom,javascript,reactjs,jestjs,jsdom,Javascript,Reactjs,Jestjs,Jsdom,我已将jest和jsdom安装到react项目中，但在导入使用window.localStorage变量的react组件时遇到问题。我已经为jsdom添加了一个安装文件，我相信它会解决这个问题以下是我的设置： package.json中的jest配置 "jest": { "verbose": true, "testEnvironment": "jsdom", "testURL": "http://localhost:8080/Dashboard/index.html",

我已将jest和jsdom安装到react项目中，但在导入使用

window.localStorage

变量的react组件时遇到问题。我已经为jsdom添加了一个安装文件，我相信它会解决这个问题

以下是我的设置：

package.json中的jest配置

"jest": {
    "verbose": true,
    "testEnvironment": "jsdom",
    "testURL": "http://localhost:8080/Dashboard/index.html",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.jsx$": "<rootDir>/node_modules/babel-jest"
    },
    "unmockedModulePathPatterns": [
      "node_modules/react/",
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "es6"
    ]
  }

我的reportlet组件使用localStorage变量，但会大叫：

调用

localStorage.getItem（）

我读到jsdom附带了jest，但我不确定是否需要额外的jsdom依赖项。我还了解到，在第一次要求react之前，需要加载jsdom

有人知道如何正确地使用jsdom配置jest吗？

jsdom不支持本地存储。看起来您可以使用节点友好的存根，如“node localstorage”。请参阅下面的评论

…或者你可以用类似的东西来嘲弄它

…或者像这里看到的那样滚动您自己的模拟：

jsdom不支持本地存储。看起来您可以使用一个节点友好的存根，如“node localstorage”-请参阅下面的注释，或者您可以使用类似的内容对其进行模拟，或者滚动您自己的存根。啊，我知道这是特定于jsdom中缺少的功能。我使用您建议的节点本地存储解决方案解决了我的问题。如果您将此格式设置为一个答案，我很乐意接受它作为正确的答案。很高兴我能提供帮助！当我回到我的机器（现在在电话上）时，我会重新发布答案。谢谢

import jsdom from 'jsdom';

const DEFAULT_HTML = '<html><body></body></html>';

global.document = jsdom.jsdom(DEFAULT_HTML);

global.window = document.defaultView;
global.navigator = window.navigator;
global.localStorage = window.localStorage;

'use strict';
import setup from './setup';
import React from 'react';
import jsdom from 'jsdom';
import Reportlet from '../components/Reportlet.jsx';

it('Ensures the react component renders', () => {

});