使用jest.js时模拟sessionStorage [英] Mocking sessionStorage when using jestjs

问题描述

好，所以我有一个简单的示例React组件，它可以与 sessionStorage :

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;

我已经使用Jest为它编写了此测试...

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!');
  });
});

并且我在最后一个代码片段中手动模拟了sessionStorage:

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;

问题是，当我尝试运行测试时，它仍然抱怨sessionStorage未定义.甚至在测试即将结束时对console.log的调用也可以确认它已定义，但是错误会直接在紧随其后的行上引发.我在这里想念什么?您可以从此处克隆整个项目，以查看目录结构等.

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.

推荐答案

要在所有测试用例中解决此问题，我使用了此方法:

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

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

，然后在您中，以简单的配置访问package.json:

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

  ...
  "jest": {
    ...
    "setupTestFrameworkScriptFile": "mock-local-storage"
  }
  ...

这将为所有测试用例添加模拟的localStorage和sessionStorage，您不需要在每个文件中都进行更改. 除了使用npm软件包，您还可以将代码放入文件中，并在setupTestFrameworkScriptFile下在此处指定文件位置.

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.

您的代码应类似于: https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

这篇关于使用jest.js时模拟sessionStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！