原来的
首先,我遵循Flux架构。
我有一个显示秒数的指示器,例如:30 秒。每一秒它显示 1 秒少,所以 29、28、27 到 0。当到达 0 时,我清除间隔,所以它停止重复。此外,我触发了一个动作。当此操作被调度时,我的商店会通知我。所以当发生这种情况时,我将间隔重置为 30 秒等等。组件看起来像:
var Indicator = React.createClass({
mixins: [SetIntervalMixin],
getInitialState: function(){
return{
elapsed: this.props.rate
};
},
getDefaultProps: function() {
return {
rate: 30
};
},
propTypes: {
rate: React.PropTypes.number.isRequired
},
componentDidMount: function() {
MyStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
MyStore.removeChangeListener(this._onChange);
},
refresh: function(){
this.setState({elapsed: this.state.elapsed-1})
if(this.state.elapsed == 0){
this.clearInterval();
TriggerAnAction();
}
},
render: function() {
return (
<p>{this.state.elapsed}s</p>
);
},
/**
* Event handler for 'change' events coming from MyStore
*/
_onChange: function() {
this.setState({elapsed: this.props.rate}
this.setInterval(this.refresh, 1000);
}
});
module.exports = Indicator;
组件按预期工作。现在,我想用 Jest 测试它。我知道我可以使用 renderIntoDocument,然后我可以设置 30 秒的超时时间并检查我的 component.state.elapsed 是否等于 0(例如)。
但是,我想在这里测试的是不同的东西。我想测试刷新功能是否被调用。此外,我想测试当我的经过状态为 0 时,它会触发我的 TriggerAnAction()。好的,对于我尝试做的第一件事:
jest.dontMock('../Indicator');
describe('Indicator', function() {
it('waits 1 second foreach tick', function() {
var React = require('react/addons');
var Indicator = require('../Indicator.js');
var TestUtils = React.addons.TestUtils;
var Indicator = TestUtils.renderIntoDocument(
<Indicator />
);
expect(Indicator.refresh).toBeCalled();
});
});
但是我在编写 npm test 时收到以下错误:
Throws: Error: toBeCalled() should be used on a mock function
我从 ReactTestUtils 看到了一个mockComponent函数,但给出了它的解释,我不确定它是否是我需要的。
好的,在这一点上,我被卡住了。任何人都可以告诉我如何测试我上面提到的两件事吗?
更新 1,基于 Ian 的回答
这就是我要运行的测试(请参阅某些行中的注释):
jest.dontMock('../Indicator');
describe('Indicator', function() {
it('waits 1 second foreach tick', function() {
var React = require('react/addons');
var Indicator = require('../Indicator.js');
var TestUtils = React.addons.TestUtils;
var refresh = jest.genMockFunction();
Indicator.refresh = refresh;
var onChange = jest.genMockFunction();
Indicator._onChange = onChange;
onChange(); //Is that the way to call it?
expect(refresh).toBeCalled(); //Fails
expect(setInterval.mock.calls.length).toBe(1); //Fails
// I am trying to execute the 1 second timer till finishes (would be 60 seconds)
jest.runAllTimers();
expect(Indicator.state.elapsed).toBe(0); //Fails (I know is wrong but this is the idea)
expect(clearInterval.mock.calls.length).toBe(1); //Fails (should call this function when time elapsed is 0)
});
});
我还是有什么误解……