Slow down storage session when using jestjs
So, I have a simple example of a React component that interacts with sessionStorage :
//App.jsx
var React = require('react/addons');
var App = React.createClass({
handleSubmit: function (e) {
},
handleNameChange: function (e) {
sessionStorage.setItem('name', e.target.value);
},
render: function () {
return (
<form>
<input type='text' label='Name' onChange={this.handleNameChange}/>
<button type='submit' label='Submit' onClick={this.handleSubmit}/>
</form>
);
}
});
module.exports = App;
I wrote this test for it using Jest ...
//App-test.js
jest.dontMock('../App.jsx');
jest.setMock('sessionStorage', require('../__mocks__/sessionStorage.js'));
describe('App', function () {
var React = require('react/addons');
var sessionStorage = require('sessionStorage');
var App = require('../App.jsx');
var TestUtils = React.addons.TestUtils;
var testapp = TestUtils.renderIntoDocument(
<App />
);
var input = TestUtils.findRenderedDOMComponentWithTag(testapp, 'input');
it('starts with empty value for name input', function () {
expect(input.getDOMNode().textContent).toEqual('');
});
it('updates sessionStorage on input', function () {
console.log(typeof sessionStorage);
TestUtils.Simulate.change(input, {target: {value: 'Hello!'}});
expect(sessionStorage.getItem('name')).toEqual('Hello!');
});
});
and I have manually simulated the sessionStorage in this last piece of code:
//sessionStorage.js
var sessionStorage = {
storage: {},
setItem: function (field, value) {
this.storage.field = value;
},
getItem: function (field) {
return this.storage.field;
}
};
module.exports = sessionStorage;
The problem is that when I try to run the test, it still complains that sessionStorage is not defined. Even calling console.log at the end of the test confirms that it is defined, but the error is thrown on the line immediately following it. What am I missing here? You can clone the complete project from here to see the directory structure, etc.
source to share
To solve this problem in all test cases, I used this:
npm install mock-local-storage --save-dev
and then in you, package.json in jest config:
...
"jest": {
...
"setupTestFrameworkScriptFile": "mock-local-storage"
}
...
This will add mocking localStorage and sessionStorage for all test cases, you don't need to change every file. Instead of using the npm package, you can also put your code in a file and specify the file location here in the setupTestFrameworkScriptFile.
Your code should be similar to: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js
source to share
I am not embedding sessionStorage. I was able to mock the global variable in the beforeEach function:
beforeEach(function() {
...
global.sessionStorage = jest.genMockFunction();
global.sessionStorage.setItem = jest.genMockFunction();
global.sessionStorage.getItem = jest.genMockFunction();
...
}
source to share
Based on Vishal's view , I installed the package:
npm install mock-local-storage --save-dev
But my settings were slightly different, so I added the equivalent to my file jest.config.js
:
...
setupFiles: [
"mock-local-storage",
...
]
...
and this seems to have solved my problem. Hope this helps.
source to share