I installed jest and jsdom in my responsive project, but I am having problems importing a responsive component that uses a variable window.localStorage. I added an installation file for jsdom, which I thought 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 '../components/Reportlet.jsx';
it('Ensures the react component renders', () => {
});
My reportlet component uses the localStorage variable, but yells:
Cannot read property getItem of undefinedwhen i call localStorage.getItem(<some item>)
I read here that the joke comes with jsdom, but I'm not sure if I need an additional jsdom dependency or not. I also read here that jsdom needs to be downloaded before the first response.
Does anyone know how to properly configure jest with jsdom?