Mocking sessionStorage when using jestjs

Question

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.

Answer 1

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.

Answer 2

Taking @afcastano solution ahead

If you want to spy storage and check the value

 beforeEach(function () {
...
  jest.spyOn(window.sessionStorage, 'setItem');
...
}

it('check storage value', () => {
  expect(window.sessionStorage.setItem).toHaveBeenCalledWith('storage-key', 'storage-value');
});

Answer 3

This worked for me in the context of using jest:

beforeAll(() =>
    sessionStorage.setItem(
        KeyStorage.KEY_NAME,
        JSON.stringify([Permission.VALUE_])
    )
);

afterAll(() => 
    sessionStorage.removeItem(KeyStorage.CONTEXT_TYPE_GLOBAL_PERMISSIONS)
);

From my understand, jest was built on top of jasmine, and jasmine allowed some form of interaction with the Browser API, hence, we need not create a storage mock from scratch.

Answer 4

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

Answer 5

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();
       ...
     }