当前位置:  开发笔记 > 编程语言 > 正文

如何测试React with Enzyme中子组件回调调用的组件回调?

如何解决《如何测试ReactwithEnzyme中子组件回调调用的组件回调?》经验,为你挑选了1个好方法。

说我有以下应用程序:

class Child extends React.Component {
    render() {
        return ;
    }

    handleChildOnClick() {
        this.props.onChildClick('foo');
    }
}

class Parent extends React.Component {
    render() {
        return click me;
    }

    handleParentOnClick(text) {
        this.props.onParentClick(12345);
    }
}

class App extends React.Component {
    render() {
        return  console.log(num)} />;
    }
}

我很难找到测试Parent组件的正确方法.在ChildApp一个都没有问题,但Parent...

我的意思是,如何测试Child组件上的单击是否将调用Parent单击回调而不:

    ...渲染Child.Parent应该作为浅层渲染单独测试.Child也将进行单独测试,如果我进行了渲染渲染,我基本上是在Child两次测试点击回调.

    ...直接调用handleParentOnClickParent实例.我不应该依赖Parent于此的确切实施.如果我更改了回调函数的名称,测试将会中断并且很可能是误报.

有第三种选择吗?



1> 小智..:

在测试时Parent,您可以:

import { shallow } from 'enzyme';
import { stub } from 'sinon';

describe('', () => {
  it('should handle a child click', () => {
    const onParentClick = stub();
    const wrapper = shallow();
    wrapper.find("Child").prop('onChildClick')('foo');
    expect(onParentClick.callCount).to.be.equal(1);
    // You can also check if the 'foo' argument was passed to onParentClick
  });
});


Enzyme的`find`方法接受一个React类作为选择器,所以你可能想要删除`Child`周围的引号(第8行).除此之外,这几乎是我要给出的答案的逐字逐句
推荐阅读
Life一切安好
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有