reactjs - 使用jest.js时模拟sessionStorage

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

//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为它编写了此测试...

//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:

//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的调用也可以确认它已定义，但是错误会直接在紧随其后的行上引发。我在这里想念什么？您可以从here克隆整个项目以查看目录结构等。

最佳答案

为了在所有测试用例中解决此问题，我使用了以下方法:npm install mock-local-storage --save-dev然后在jest配置下的package.json中:

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

这将为所有测试用例添加模拟的localStorage和sessionStorage，您不需要在每个文件中都进行更改。
除了使用npm软件包，您还可以将代码放入文件中，并在setupTestFrameworkScriptFile下在此处指定文件位置。
您的代码应类似于:https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js

关于reactjs - 使用jest.js时模拟sessionStorage，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30792076/