Как настроить jsdom с помощью jest

Я установил jest и jsdom в свой проект реакции, но у меня проблемы с импортом компонента реакции, который использует переменную window.localStorage. Я добавил установочный файл для jsdom, который, как я полагал, решит проблему.

Вот моя установка:

конфиг jest в 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>)

Я прочитал здесь, что jest поставляется с jsdom, но я не уверен, нужна ли мне дополнительная зависимость jsdom или нет. Я также прочитал здесь, что jsdom необходимо загрузить, прежде чем требовать реакции для первого время.

Кто-нибудь знает, как правильно настроить jest с jsdom?


reactjs javascript jestjs jsdom
person Special Character    schedule 18.01.2017    source источник
comment
jsdom не поддерживает localStorage. Похоже, вы можете использовать удобную для узлов заглушку, такую ​​как «node-localstorage». github.com/tmpvar/jsdom/issues/1137 или вы можете смоделировать его с помощью чего-то вроде github.com/letsrock-today/mock-local-storage или сверните свой собственный stackoverflow.com/questions/11485420/   -  person Jeff McCloud    schedule 18.01.2017
comment
Ах, я вижу, что это связано с отсутствующей функциональностью в jsdom. Я решил свою проблему, используя предложенное вами решение node-localstorage. Если вы отформатируете это как ответ, я с радостью приму его как правильный ответ.   -  person Special Character    schedule 18.01.2017
comment
Рад, что смог помочь! Я сделаю репост в качестве ответа, когда вернусь к своей машине (сейчас на телефоне). Спасибо!   -  person Jeff McCloud    schedule 18.01.2017

Ответы (1)


arrow_upward
1
arrow_downward

jsdom не поддерживает localStorage. Похоже, вы можете использовать удобную для узлов заглушку, такую ​​​​как «node-localstorage». См. нижнюю часть комментариев по адресу https://github.com/tmpvar/jsdom/issues/1137

... или вы можете смоделировать его с помощью чего-то вроде https://github.com/letsrock-today/mock-local-storage

... или сверните свой собственный макет, как показано здесь: в модульных тестах JavaScript?

person Jeff McCloud    schedule 19.01.2017