Question

提供了一个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执行回调以确保正在调用回调（使用enzyme或test-utils），需要执行哪些步骤？

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

Answer 1

在您的代码中，有些事情对我来说似乎有些奇怪。我假设他们是创建问题时的错别字，但尽管如此，我仍将对其进行评论。如果我假设碰巧是错的话，请这样说，然后我将相应地编辑答案。

首先，您的render方法不返回任何东西。通常，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的{{1}}方法，我将对{{1 }} Foo方法来检查它是否被调用。然后，我将搜索Foo元素并调用其onOperationDone。

使用酶，您可以：

Baz

类实例的间谍方法

如果您试图监视属于类实例的方法（无论是通过在构造函数中定义该方法（如您的情况，还是使用class fields），则该事物将得到一个有点棘手。

假设您要在初始代码中监视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); });方法并将其添加到实例，然后调用render方法，并Foo被被分配为onOperationDone组件的道具。

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

要解决此问题，我们需要强制更新组件（以便将包装的onOperationDone分配为Baz组件的prop。为此，我们使用了update方法不幸的是，似乎更新方法并不总是force a re-render。

因此，一种解决方法是调用setProps方法来强制进行更新。最终的测试代码应如下所示：

onOperationDone

测试React中的嵌套组件回调

1 个答案:

类实例的间谍方法