javascript - 如何测试从父组件传递的子组件中的回调单击？

Question

我有以下父组件:

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.

我怎样才能用 Jest 和 enzyme 正确地做到这一点？可能吗？

Answer 1

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

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}