Как проверить обратный вызов в дочернем компоненте, который был передан из родительского компонента?

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.

Как я могу сделать это правильно с шуткой и энзимом?Возможно ли это?

Answer 1

проблема возникает из-за объявления метода onClick, если вы объявите свою функцию следующим образом

onClick() {}

вместо

onClick = () => {}

ваш тест должен работать, потому что onClick будет присутствовать в объекте Parent.prototype, обратите внимание, что ключевое слово this в методе onClick больше не будет ссылаться на экземпляр класса.

Если вам нужно использовать функцию стрелки (для получения правильногозначение 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();
});

Использование onClick = () => {} в классе Parent не добавит свойство к Parent.prototype, фактически он объявит переменную экземпляравот так:

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

Кстати, присутствие Fragment внутри вашего render метода кажется бесполезным, вы можете удалить его

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

Answer 2

Ваша функция 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}

Answer 3

Я предлагаю сделать это с двумя тестами:

1. В случае необходимости вызывается модульный тест для компонента Child, который утверждает, что его onClick опора.
2. Модульный тестдля Parent того, что он правильно устанавливает onClick опору Child при рендеринге.

С помощью этих двух тестов вы будете предупреждены, если какой-либо из этих кусков потерпит неудачу.