好的,我有一个简单的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克隆整个项目以查看目录结构等。
5条答案
按热度按时间taor4pac1#
为了在所有测试用例中解决这个问题,我使用了以下方法:
npm install mock-local-storage --save-dev
然后在您的jest配置下运行package.json:
这将为所有测试用例添加模拟的localStorage和sessionStorage,您不需要在每个文件中进行更改。除了使用npm包,您还可以将代码放在一个文件中,并在setupTestFrameworkScriptFile下指定文件位置。
您的代码应类似于:https://github.com/letsrock-today/mock-local-storage/blob/master/src/mock-localstorage.js
0pizxfdo2#
我也没有注入sessionStorage。我能够模拟beforeEach函数上的全局变量:
wnavrhmk3#
从Vishal提交开始,我安装了这个包:
npm install mock-local-storage --save-dev
但是我的设置有一点不同,所以我在
jest.config.js
文件中添加了等价的代码:这似乎解决了我的问题希望对你有帮助。
cqoc49vn4#
采取@afcastano解决方案
如果你想窥探存储并检查值
ars1skjm5#
在使用
jest
的上下文中,这对我很有效:据我所知,jest是在jasmine的基础上构建的,jasmine允许与Browser API进行某种形式的交互,因此,我们不需要从头开始创建存储模拟。