在使用jestjs时模拟sessionStorage
好的，我有一个简单的示例React组件，它与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为它写了这个测试...
//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克隆整个项目，以查看目录结构等。
回答 4
Stack Overflow用户
发布于 2017-03-10 05:28:48
为了解决所有测试用例中的这个问题，我使用了以下代码：
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
Stack Overflow用户
发布于 2015-11-09 11:40:22
我也不会注射sessionStorage。我能够模拟beforeEach函数上的全局变量：
beforeEach(function() {
...
global.sessionStorage = jest.genMockFunction();
global.sessionStorage.setItem = jest.genMockFunction();
global.sessionStorage.getItem = jest.genMockFunction();
...
}
Stack Overflow用户
发布于 2019-10-22 04:20:01
从Vishal提交开始，我安装了这个包：
npm install mock-local-storage --save-dev
但是我的设置有点不同，所以我在我的jest.config.js文件中添加了等价物：
...
setupFiles: [
"mock-local-storage",
...
]
...这似乎解决了我的问题。希望这能有所帮助。
https://stackoverflow.com/questions/30792076
复制相似问题
腾讯云开发者
