Как проверить функцию, которая была передана реквизитом

Question

Если у меня есть такой компонент

import React from "react";

const GettingStarted = ({ object }) => <Button onPress={() => object.next()} />;

Как бы вы протестировали с шуткой, что object.next() вызывается внутри компонента?

Answer 1

Основная идея заключается в том, чтобы шпионить за функцией, передаваемой на onPress. Затем вы должны смоделировать событие onPress на кнопке и проверить, была ли вызвана функция с какими-либо параметрами и т. Д. Затем вы проверили бы фактический результат выполнения функции. Так, например, если функция изменяет текст в кнопке с «Click Me» на «Clicked!», Вы должны установить первое текстовое свойство перед щелчком, а затем проверить обновленное.

Пример с Jest:

const onPressSpy = jest.fn();

const gettingStartedButton = shallow(<GettingStarted object={onPressSpy} />);

expect(gettingStartedButton.find('button').children().text()).toBe('Click Me!');

gettingStartedButton.find('button').simulate('press');
expect(onPressSpy).toHaveBeenCalled();
expect(gettingStartedButton.find('button').children().text()).toBe('Clicked!');