IT技术 - 我如何用 jest 配置 jsdom - 吾爱随笔录

我已经将 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"
    ]
  }

设置.js

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;

测试.js

'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', () => {

});

我的 reportlet 组件使用 localStorage 变量但大喊：

Cannot read property getItem of undefined 当我打电话 localStorage.getItem(<some item>)

我在这里读到jest 随 jsdom 一起提供，但我不确定是否需要额外的 jsdom 依赖项。我还在这里读到 jsdom 需要在第一次react之前加载。

有谁知道如何正确配置 jest 与 jsdom？