我正在尝试测试一些使用Firebase的代码。我正在实现firebase-mock库。我现在遇到的问题是,我应该测试的大多数组件都是从HOC获取firebase实例的(我有一个使用firebase方法的类,该类通过index.js中的上下文API提供,并通过withwithFirebase HOC,被包装的组件的props中将具有firebase。
在这种情况下,我要测试的代码如下:
// mount.js
import React, { Component } from 'react';
import { withFirebase } from '../../components/Firebase';
class mount extends Component {
state = {
data: null,
};
ref = this.props.firebase.db.ref('/testing');
componentDidMount() {
// Fetch from testing ref
this.ref.on('value', snap => {
this.setState({ data: snap });
});
}
componentWillUnmount() {
this.ref.off('value');
}
render() {
return <div />;
}
}
export default withFirebase(mount);
在测试文件中,我正在执行以下操作:
describe('Component mount.js', () => {
it.only('fetches', () => {
const wrapper = mount(<Mount />);
console.log(wrapper.prop());
console.log(wrapper.state().data);
});
});
这失败,因为this.props.firebase为null。 我如何解决此问题,以便我可以继续进行并最终按我的预期模拟firebase调用。 我猜测问题出在如何在酶中使用Context API,但我不确定。
答案 0 :(得分:0)
您收到的消息是因为 encode.mount() 返回的是 withFirebase HOC 组件,而不是您期望的 myContainedComponent = wrapper.find('Mount')
会返回您可以执行的组件 console.log(myContainedComponet.props);
关于使用酶测试 HOC 及其封闭组件的类似问题有很多答案。我使用的是 Enzyme.mount() 不支持的 React 17,所以我必须使用浅层。还有一些与执行 wrapper = shallow(shallow(<BurgerBuilder/>).get(0));
相关的答案,但这些也不适用于我的设置。
对我有用的是:
wrapper = shallow(<BurgerBuilder/>);
instance = wrapper.find('BurgerBuilder').dive().instance();
jest.spyOn(instance, 'addIngredientHandler');
注意:这是 BurgerBuilder 组件的导出。
export default withErrorHandler(BurgerBuilder, axiosOrders);
在这个例子中,instance 保存了所包含组件的类实例,而不是 HOC,withErrorHandler。
关于我的示例的一个有趣的事情是“addIngredientHandler”是我类中的一个箭头函数。还有其他线程讨论 testing class member arrow functions in React 的复杂性。 (顺便说一句,你不需要做 instance.forceUpdate();
)
为了全面公开,我在学习 React 的同时也在培养我的测试技能。我正在测试的组件是在运行 Udemy 课程时开发的:React - The Complete Guide (incl Hooks, React Router, Redux)