我如何用玩笑配置jsdom

本文介绍了我如何用玩笑配置jsdom的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have installed jest and jsdom into my react project but I am having problems with importing a react component that uses the window.localStorage variable. I have added a setup file for jsdom that I believed would solve the problem.

这是我的设置:

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

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变量，但大喊:

My reportlet component uses the localStorage variable but yells:

Cannot read property getItem of undefined当我呼叫localStorage.getItem(<some item>)

我在此处读到，jest与jsdom一起提供但是我不确定是否需要额外的jsdom依赖关系.我还阅读了此处，需要先加载jsdom，然后才需要对第一个做出反应时间.

I read here that jest comes shipped with jsdom but I am not sure if I need the extra jsdom dependency or not. I also read here that jsdom needs to be loaded before requiring react for the first time.

有人知道如何正确地用jsdom配置玩笑吗?

Does anyone know how to configure jest with jsdom correctly?

JSDOM

我如何用玩笑配置jsdom

问题描述

推荐答案