Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mocking sessionStorage when using jestjs

Ok, so I have this simple example 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've written 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've manually mocked sessionStorage in this last code snippet:

//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, when I try to run the test, it still complains that sessionStorage is undefined. Even the call to console.log near the end of the test confirms that it is defined, but the error is thrown on the line immediately following. What am I missing here? You can clone the full project from here to see the directory structure, etc.

like image 566
blimpse Avatar asked Jun 11 '15 21:06

blimpse


People also ask

Does sessionStorage persist on refresh?

Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser. What's interesting about them is that the data survives a page refresh (for sessionStorage ) and even a full browser restart (for localStorage ).

Does jest mock localStorage?

You can mock localStorage globally for React in Jest by adding the above to the setupTests. js file and adding global. localStorage under the function.

Is sessionStorage always available?

sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.


3 Answers

To solve this problem across all test cases I used this:

npm install mock-local-storage --save-dev

and then in you, package.json under jest configuration:

  ...
  "jest": {
    ...
    "setupFilesAfterEnv": ["mock-local-storage"]
  }
  ...

This will add mocked localStorage and sessionStorage for all test cases, you do not need changes in every file. Instead of using npm package, you can also put your code in a file and specify file-location here under setupTestFrameworkScriptFile.

Your code should be similar to : https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

like image 67
Vishal Avatar answered Oct 13 '22 01:10

Vishal


Going off the submission from Vishal, I installed the package:

npm install mock-local-storage --save-dev

But my setup was a little different so I added the equivalent to my jest.config.js file:

...
setupFiles: [
    "mock-local-storage",
    ...
]
...

and this seemed to resolve my issue. Hope this helps.

like image 44
1housand Avatar answered Oct 13 '22 00:10

1housand


I am not injecting sessionStorage neither. I was able to mock the global variable on the beforeEach function:

 beforeEach(function() {
       ...
       global.sessionStorage = jest.genMockFunction();
       global.sessionStorage.setItem = jest.genMockFunction();
       global.sessionStorage.getItem = jest.genMockFunction();
       ...
     }
like image 28
afcastano Avatar answered Oct 12 '22 23:10

afcastano