Как использовать jest.spyOn для функции внутри функционального компонента

Question

? Вопросы и помощь

У меня есть этот компонент, который я хочу протестировать, и я не могу использовать spyOn ни для одного из его внутренних методов, так как не могу связаться с ними.

Я шел по этому путиучебное пособие TDD С React, Jest и Enzyme

, но я хотел, чтобы калькулятор функционировал, поскольку я хочу больше узнать, как он работает, чтобы использовать хуки в будущем.

import React, {useState} from 'react';
import './Calculator.css';
import Display from "../Display/Display";
import Keypad from "../Keypad/Keypad";

const Calculator = () => {
  // value to be displayed in <Display />
  const [displayValue, setDisplayValue] = useState('0');

  // values to be displayed in number <Keys />
  const [numbers, setNumbers] = useState(['9', '8', '7', '6', '5', '4', '3', '2', '1', '.', '0','ce']);

  // values to be displayed in operator <Keys />
  const [operators, setOperators] = useState(['/', 'x', '-', '+']);

  // operator selected for math operation
  const [selectedOperator, setSelectedOperator] = useState('');

  // stored value to use for math operation
  const [storedValue, setStoredValue] = useState('');

  const callOperator = () => {
    console.log('call operation');
  };

  const setOperator = () => {
    console.log('set operation');
  };

  const updateDisplay = () => {
    console.log('update display');
  };

  return(
    <div className="calculator-container" >
      <Display displayValue={displayValue} />
      <Keypad
        callOperator={callOperator}
        numbers={numbers}
        operators={operators}
        setOperator={setOperator}
        updateDisplay={updateDisplay}
      />
    </div>
  );
};

export default Calculator;

вот тест, я не могу напрямую связаться с updateDisplay, поэтому я получаю реквизиты клавиатуры (когда я передаю ее этому компоненту) и оттуда издеваюсь, но, похоже, это не тот путь, у кого-то есть способчтобы сделать это лучше или предложить лучший способ издеваться над этой функцией.

describe('mounted <Calculator />', () => {
  let wrapper;
  let keypad;
  beforeEach(() => {
    wrapper = mount(<Calculator/>);
    keypad = wrapper.find(Keypad);
  });

  it('calls updateDisplay when a number key is clicked', () => {
    const spy = jest.spyOn(wrapper.find(Keypad).props(), 'updateDisplay');
    wrapper.update();
    expect(spy).toHaveBeenCalledTimes(0);
    wrapper.find('.number-key').first().simulate('click');
    expect(spy).toHaveBeenCalledTimes(1);
  });
});

Заранее спасибо.