Javascript 在react中测试嵌套组件回调

给定呈现

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

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onOperationDone=（）=>{
log（“做某事”）；
}
}
render（）{
返回(
)
}
}

为了确保调用回调（使用or），需要执行哪些步骤才能使

Baz

执行回调

---

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

在你的代码中有些东西对我来说有点奇怪。我假设在创建问题时它们是打字错误，但我还是会对它们进行评论。如果我的假设恰好是错误的，那么说出来，我会相应地编辑我的答案

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

其次，

onOperationDone

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

考虑到这一点，您的类将如下所示（注意，我已经删除了构造函数，因为它只调用

super

，这是自动完成的）：

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

假设您正试图在初始代码中发现

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

声明未调用spied方法将失败（尽管您将看到日志“Dosomething”）

这是因为在浅层渲染

Foo

组件时，将创建一个新的

onOperationDone

方法并将其添加到实例中，然后调用渲染方法，并将

onOperationDone

指定为

Baz

组件的道具

接下来，您将监视实例方法（使用

jest.spyOn

），但这会创建一个新方法，将原始的

onOperationDone

包装起来，以便跟踪调用它的次数和其他统计信息。问题是，

Baz

prop没有改变，它是对原始方法的引用，而不是包装的方法。所以包装的方法永远不会被调用

为了克服这个问题，我们需要强制更新组件（这样包装的

onOperationDone

被指定为

Baz

组件的属性。为此，我们使用Ezyme的浅层渲染器方法。不幸的是，更新方法似乎并不总是这样

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

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

it（'child调用其父回调'，function（））{
常量包装器=浅（）；
const instance=wrapper.instance（）；
jest.spyOn（例如，“onOperationDone”）；
//wrapper.update（）；将是调用
wrapper.setProps（{}）；
find（Baz.prop（'onOperationDone'）（）；
期望（instance.onOperationDone）.tohaveEncalledTimes（1）；
});

谢谢您的详细解释！我已将代码段更改为包含

return

语句（在我删除代码时省略了该语句）。请您详细说明当构造函数中定义了

onOperationDone

时，如何执行此操作（如在我的代码段中）？

onOperationDone

修改状态，我想避免使用

bind（）

当

onOperationDone

传递给

Baz

）先生时，我更新了答案，以考虑您要测试的情况。希望有帮助！对不起，您能提供功能组件的示例吗？请

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

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

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