我正在为连接到Redux存储的React组件编写测试。我要测试的是,当我在商店上分发reset
时,组件状态恢复为默认状态。
其想法如下:当调度RESET时,组件将接收真实的reset属性,并在componentWillReceiveProps
中将组件状态设置为默认状态。它可以工作,但不能通过测试。如果我连接调试器并运行测试,我可以看到它通过了componentWillReceiveProps
中的设置状态,但是当我期望timeLeft
的状态为10000时,它仍然是上面设置的1111。我想念什么?这可能不是一种理想的测试方法,但是我是React / Redux组件测试的新手,并且很高兴听到有关改进我的测试方法的最佳实践。
减速器:
const resetReducer = (state, action) => (action.type === 'RESET');
组件:
class Timer extends React.Component {
componentWillReceiveProps(next) {
if (next.reset) {
this.setState({
timeLeft: 10000,
});
}
}
function mapStateToProps(state) {
return {
reset: state.reset
}
}
export default connect(mapStateToProps)(Timer);
测试:
it('Reset', () => {
// use mount because I need componentWillReceiveProps to run
const wrapper = mount(<Timer/>);
wrapper.setState({
timeLeft: 1111
});
store.dispatch({ type: 'RESET' });
wrapper.update();
expect(wrapper.state('timeLeft)).toBe(10000);
});
答案 0 :(得分:2)
您不需要测试Redux功能。您应该隔离并测试您的React代码是否正常工作。
更改此行
class Timer extends React.Component {
到
export class Timer extends React.Component {
在您的测试文件中
import { Timer } from './file-location';
您可以像这样测试组件的行为
it('Reset', () => {
const wrapper = mount(<Timer reset={false}/>);
wrapper.setState({
timeLeft: 1111
});
wrapper.update();
expect(wrapper.state().timeLeft).toBe(1111);
wrapper.setProps({ reset: true});
wrapper.update();
expect(wrapper.state().timeLeft).toBe(10000);
});
答案 1 :(得分:1)
在编写单元测试时,酶不允许您进行这种测试,因为使用mount
和shallow
可以隔离组件。不再是connected
组件。
这就是为什么即使您调用“ RESET”操作,组件也不会收到更改。
在props正确时可以测试组件是否正在更新的操作,您可以像这样更新props:
wrapper.setProps({ timeLeft: 10000});
这样,您可以强制组件接收道具并检查行为是否符合您的期望。
it('Reset', () => {
// use mount because I need componentWillReceiveProps to run
const wrapper = mount(<Timer/>);
wrapper.setState({
timeLeft: 1111
});
wrapper.setProps({ timeLeft: 10000});
wrapper.update();
expect(wrapper.state('timeLeft)).toBe(10000);
});
然后,要测试Reducer,您可以遵循官方文档:https://github.com/reduxjs/redux/blob/master/docs/recipes/WritingTests.md
请记住,单元测试的思想是将所有内容隔离并拆分为代码的一小部分。 如果要测试组件之间的集成,请尝试使用自动化Tets。
希望这对您有用!