如何用 jest 配置 jsdom答案

【问题标题】：How do I configure jsdom with jest如何用 jest 配置 jsdom
【发布时间】：2017-06-02 05:44:36
【问题描述】：

我已将 jest 和 jsdom 安装到我的 react 项目中，但在导入使用 window.localStorage 变量的 react 组件时遇到问题。我已经为 jsdom 添加了一个我认为可以解决问题的设置文件。

这是我的设置：

package.json 中的笑话配置

"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"
    ]
  }

setup.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;

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

我读到here 说 jest 是随 jsdom 一起提供的，但我不确定我是否需要额外的 jsdom 依赖项。我还阅读了here，在第一次需要做出反应之前需要加载 jsdom。

有人知道如何正确配置 jest 和 jsdom 吗？

【问题讨论】：

jsdom 不支持 localStorage。看起来您可以使用节点友好的存根，例如“node-localstorage” - 请参阅 github.com/tmpvar/jsdom/issues/1137 的 cmets 底部，或者您可以使用 github.com/letsrock-today/mock-local-storage 之类的东西来模拟它，或者使用您自己的 stackoverflow.com/questions/11485420/…
啊，我看到它特定于 jsdom 中缺少的功能。我通过使用您建议的 node-localstorage 解决方案解决了我的问题。如果您将其格式化为答案，我很乐意接受它作为正确答案。
很高兴我能帮上忙！当我回到我的机器（现在在电话上）时，我会重新发布作为答案。谢谢！

标签： javascript reactjs jestjs jsdom

【解决方案1】：

jsdom 不支持本地存储。看起来您可以使用节点友好的存根，例如“node-localstorage”。见 cmets 底部https://github.com/tmpvar/jsdom/issues/1137

...或者你可以用 https://github.com/letsrock-today/mock-local-storage 之类的东西来模拟它

...或者像这里看到的那样滚动你自己的模拟：How to mock localStorage in JavaScript unit tests?

【讨论】：