2

给定一个Foo渲染Baz嵌套组件的（根）组件，其中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为了确保调用回调（使用酵素或test-utils ） ，需要执行哪些步骤来执行回调？

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

4

1 回答 1

2

在您的代码中，有些事情对我来说似乎有点奇怪。我假设在创建问题时它们是拼写错误，但我仍然会对它们发表评论。如果我假设的内容恰好是错误的，请说出来，我会相应地编辑我的答案。

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

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

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

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

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

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

使用酶，您可以：

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);
});

类实例的间谍方法

如果您试图监视属于您的类实例的方法（无论是通过在构造函数中定义方法，如您的情况，还是通过使用类字段），事情变得有点棘手。

假设您正试图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);
});

它将失败，说明未调用 spied 方法（尽管您会看到日志“做某事”）。

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

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

为了克服这个问题，我们需要强制更新组件（以便将包装的组件onOperationDone分配为Baz组件的道具。为此，我们有酶的浅渲染器的更新方法。不幸的是，似乎更新方法并不总是强制重新渲染。

所以一个解决方法是调用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);
});
于 2019-07-20T15:00:07.870 回答