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

Question

我正在尝试测试一些使用 firebase 的代码。 我正在实施 firebase-mock 库。 我现在遇到的问题是，我应该测试的大多数组件都从 HOC 获取 firebase 实例（我有一个包含我正在使用的 firebase 方法的类，它是通过 index.js 中的上下文 API 提供的，并通过一个 withFirebase 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 为空。 我该如何解决这个问题，以便我可以继续并最终按照我的意图模拟 firebase 调用。 我猜测问题是如何在 Enzyme 中使用 Context API，但我不确定。

Answer 1

您收到的消息是因为 encode.mount() 正在返回 withFirebase HOC 组件，而不是您期望的 <Mount> 组件。 您需要做的是“找到”包含的组件。 在您的示例中，我认为myContainedComponent = wrapper.find('Mount')将返回您可以执行的组件console.log(myContainedComponet.props); 关于使用Enzyme测试HOC及其封闭组件的类似问题有很多答案。 我使用的是 Enzyme.mount() 不支持的 React 17，所以我必须使用浅层。 还有一些与做wrapper = shallow(shallow(<BurgerBuilder/>).get(0));相关的答案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”是我班级中的一个箭头函数。 还有其他线程讨论在 React中测试类成员箭头函数的复杂性。 （顺便说一句，你不需要做instance.forceUpdate(); ）

为了全面公开，我在学习 React 的过程中建立了我的测试技能。 我正在测试的组件是在运行 Udemy 课程时开发的： React - 完整指南（包括 Hooks、React Router、Redux）