繁体   English   中英

如何测试回调单击从父组件传递的子组件?

[英]How test callback click in child component that was passed from parent component?

我有以下父组件:

import React, { Fragment } from 'react';

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  onClick = () => {
    // working
  }

  render() {

    return (
      <Fragment>
        <Child handleClick={this.onClick} />
      </Fragment>
    );
  }
}

我需要检查子组件中是否触发了回调,父组件中的onClick方法是否将被触发。 我写了这样的测试:

test("check callback fire", () => {
    let mockFn = jest.fn();
    Parent.prototype.onClick = mockFn;

    let wrapper = shallow(<Parent />);

    wrapper.find('Child').props().handleClick();

    expect(mockFn).toHaveBeenCalled();
  });

我有一个错误

 Expected mock function to have been called, but it was not called.

我该如何用笑话和酵素正确地做到这一点? 可能吗?

您的onClick函数位于对象本身而不是原型上。 您必须修改对象实例。

let mockFn = jest.fn();
let wrapper = shallow(<Parent />);
wrapper.find('Child').props().handleClick = mockFn; 
wrapper.find('Child').props().handleClick(); 
expect(mockFn).toHaveBeenCalled();

话虽如此,您是自己调用onClick,因此测试它是否被调用没有意义。

您应该测试其效果,例如,部分DOM未显示。

您还可以测试它们组件的状态是否正确更新,即{show:false}

问题来自onClick方法的声明,如果您这样声明函数

onClick() {}

代替

onClick = () => {}

您的测试应该可以进行,因为onClick将出现在Parent.prototype对象中,请注意, onClick方法中的this关键字将不再引用类实例。

如果您需要使用箭头功能(以获取this的正确值),则可以修改测试:

test("check callback fire", () => {
  let mockFn = jest.fn();

  let wrapper = shallow(<Parent />);
  wrapper.instance().onClick = mockFn;

  wrapper.find('Child').props().handleClick();

  expect(mockFn).toHaveBeenCalled();
});

Parent类中使用onClick = () => {}不会将属性添加到Parent.prototype ,实际上,它将声明一个实例变量,如下所示:

class Parent {
  constructor() {
    super();
    this.onClick = () => {}
  }
}

顺便说一句,您的render方法中存在Fragment似乎没有用,您可以将其删除

render() {
  return <Child handleClick={this.onClick} />;
}

我建议通过两个测试来做到这一点:

  1. 适当时将调用断言其onClick道具的Child组件的单元测试。
  2. Parent级进行单元测试,以使其在渲染时正确设置其ChildonClick道具。

通过这两个测试,如果其中任何一个失败,您都会收到警报。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM