安装在酶中时,通过HOC获取道具

时间:2019-05-05 16:25:17

标签: reactjs firebase jestjs enzyme

我正在尝试测试一些使用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,但我不确定。

1 个答案:

答案 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)