javascript - How do I configure jsdom with jest - Stack Overflow

admin2025-04-16 0

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

Here is my setup:

jest config in 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 '../ponents/Reportlet.jsx';

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

});

My reportlet ponent uses the localStorage variable but yells:

Cannot read property getItem of undefined when I call localStorage.getItem(<some item>)

I read here that jest es 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.

Does anyone know how to configure jest with jsdom correctly?

Here is my setup:

jest config in 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 '../ponents/Reportlet.jsx';

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

});

My reportlet ponent uses the localStorage variable but yells:

Cannot read property getItem of undefined when I call localStorage.getItem(<some item>)

I read here that jest es 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.

Does anyone know how to configure jest with jsdom correctly?

Share asked Jan 18, 2017 at 0:22 Special Character 2,3594 gold badges27 silver badges35 bronze badges

1 jsdom does not support localStorage. Looks like you can use a node-friendly stub like 'node-localstorage' - See bottom of ments at github./tmpvar/jsdom/issues/1137 , or you can mock it with something like github./letsrock-today/mock-local-storage or roll your own stackoverflow./questions/11485420/… – Jeff McCloud Commented Jan 18, 2017 at 0:53
1 Ahh I see that it is specific to missing functionality in jsdom. I solved my problem by using your suggested solution of node-localstorage. If you format this as an answer I would gladly accept it as the correct answer. – Special Character Commented Jan 18, 2017 at 1:32
Glad I could help! I'll repost as an answer when I'm back at my machine (on phone now). Thanks! – Jeff McCloud Commented Jan 18, 2017 at 1:37

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

jsdom does not support localStorage. It looks like you can use a node-friendly stub like 'node-localstorage'. See bottom of ments at https://github./tmpvar/jsdom/issues/1137

...or you can mock it with something like https://github./letsrock-today/mock-local-storage

...or roll your own mock like seen here: How to mock localStorage in JavaScript unit tests?

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744809682a268208.html

javascriptHow do I configure jsdom with jestStack Overflow

最新回复(0)