使用 jestjs 时模拟 sessionStorage

IT技术 reactjs session-storage jestjs
2021-05-21 04:42:48

好的,所以我有这个与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 也确认它已定义,但错误会在紧随其后的行中抛出。我在这里错过了什么?您可以从这里克隆完整的项目以查看目录结构等。

4个回答

为了在所有测试用例中解决这个问题,我使用了这个:

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

我也没有注入 sessionStorage。我能够在 beforeEach 函数上模拟全局变量:

 beforeEach(function() {
       ...
       global.sessionStorage = jest.genMockFunction();
       global.sessionStorage.setItem = jest.genMockFunction();
       global.sessionStorage.getItem = jest.genMockFunction();
       ...
     }

Vishal提交后,我安装了该软件包:

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

但是我的设置有点不同,所以我在我的jest.config.js文件中添加了等价物

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

这似乎解决了我的问题。希望这可以帮助。

提前采用@afcastano 解决方案

如果您想监视存储并检查值

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

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