javascript - 在 react 中测试嵌套组件回调

Question

给定一个呈现 Baz 嵌套组件的 Foo(根)组件，其中 Baz 有一个名为 onOperationDone 的属性> 接受回调。

class Foo extends React.Component {
  constructor(props) {
    super(props);

    this.onOperationDone = () => {
      console.log("do something");
    }
  }

  render() {
    return(
      <div>
        <Baz onOperationDone={this.onOperationDone} />
      </div>
    )
  }
}

要使 Baz 执行回调以确保调用回调(使用 enzyme 或 test-utils)需要执行哪些步骤？

你能帮我理解应该怎么做吗？

Answer 1

我觉得你的代码有些奇怪。我假设他们在创建问题时是拼写错误，但我仍然会对它们发表评论。如果我的假设恰好是错误的，请说出来，我会相应地修改我的答案。

首先，您的渲染方法没有返回任何东西。通常，JSX 应该放在 return 语句中。

其次，onOperationDone 方法在类的构造函数中声明。这意味着每次创建该类的新实例时，也会创建该方法(占用必要的内存量)。相反，我会在类的原型(prototype)中定义该方法，以便它在所有实例之间共享。

考虑到这一点，您的类看起来像(请注意，我已经删除了构造函数，因为它只会调用 super 并且是自动完成的):

class Foo extends React.Component {
    onOperationDone() {
        console.log("do something");
    }

    render() {
        return (
            <div>
                <Baz onOperationDone={this.onOperationDone} />
            </div>
        );
    }
} 

现在，要测试当 Baz 组件调用 onOperationDone 属性时，Foo 的 onOperationDone 方法是被调用时，我会在 Foo onOperationDone 方法上设置一个 spy 来检查它是否被调用。然后，我会搜索 Baz 元素并调用它的 onOperationDone。

有了 enzyme ，您可以:

it('the child calls its parent callback', function() {
    jest.spyOn(Foo.prototype, 'onOperationDone');

    const wrapper = shallow(<Foo />);
    wrapper.find(Baz).prop('onOperationDone')();
    expect(Foo.prototype.onOperationDone).toHaveBeenCalledTimes(1);
});

类实例的 spy 方法

如果您试图监视属于您的类的实例的方法(无论是通过在构造函数中定义方法，如您的情况，还是通过使用 class fields )，事情会变得有点棘手.

假设您正试图在初始代码中监视 onOperationDone:

export default class Foo extends React.Component {
    constructor(props) {
        super(props);

        this.onOperationDone = () => {
            console.log("do something");
        };
    }

    render() {
        return (
            <div>
                <Baz onOperationDone={this.onOperationDone} />
            </div>
        );
    }
}

如果您尝试通过监视原型(prototype)但监视实例方法的相同方法，它将不起作用:

it('the child calls its parent callback', function() {
    const wrapper = shallow(<Foo />);
    const instance = wrapper.instance();
    jest.spyOn(instance, 'onOperationDone');

    wrapper.find(Baz).prop('onOperationDone')();
    expect(instance.onOperationDone).toHaveBeenCalledTimes(1);
});

它会失败，说明未调用 spy 方法(尽管您会看到日志“做某事”)。

这是因为浅渲染 Foo 组件时，会创建一个新的 onOperationDone 方法并将其添加到实例中，然后调用 render 方法并onOperationDone 被分配给 Baz 组件。

接下来，您正在监视实例方法(使用 jest.spyOn)，但这样做的目的是创建一个包装原始 onOperationDone 的新方法，以便跟踪它被调用的次数和其他统计数据。问题是，Baz 属性没有改变，它是对原始方法的引用，而不是包装的方法。所以包装的方法永远不会被调用。

为了克服这个问题，我们需要强制更新组件(以便包装的 onOperationDone 被分配为 Baz 组件的 prop。为此，我们有update enzyme 浅层渲染器的方法。不幸的是，更新方法似乎并不总是 force a re-render 。

因此，解决方法是调用 setProps强制更新的方法。最终的测试代码应该是这样的:

it('the child calls its parent callback', function() {
    const wrapper = shallow(<ChildComponentCallbackInstance />);
    const instance = wrapper.instance();
    jest.spyOn(instance, 'onOperationDone');

    // wrapper.update(); would be the ideal method to call
    wrapper.setProps({});

    wrapper.find(Baz).prop('onOperationDone')();
    expect(instance.onOperationDone).toHaveBeenCalledTimes(1);
});