Почему не работает тест на ToHaveBeenCalled() jest?

Question

[Артём]

Пытаюсь проверить, вызывается ли обработчик onClickPlay по клику, но в консоли получаю ошибку и

Expected number of calls: >= 1                                                                                                                                                                                               
    Received number of calls:    0

Код теста

test('calls onPlayHandler when the Play button is clicked startgame COMP', () => {
  const onClickPlay = jest.fn();
  render(
    <Provider store={store}>
      <StartGame
        title="Game Name"
        description="Game Description"
        onHowToPlayHandler={() => {}}
        onPlayHandler={onClickPlay}
      />
    </Provider>
  );
  const playButton = screen.getByText('startGame.play'); 
  userEvent.click(playButton);

  expect(onClickPlay).toHaveBeenCalled();
});

Кнопка находится правильно, выводил в консоль, на ней есть обработчик

pendingProps: {
            className: 'start-game__btn',
            onClick: [Function: onClickPlay],
            children: 'startGame.play'
          },
          memoizedProps: {
            className: 'start-game__btn',
            onClick: [Function: onClickPlay],
            children: 'startGame.play'
          },
          updateQueue: null,

В чем может быть дело?

Answer 1

[Полина Титова]

How Jest: toHaveBeenCalled() Work?
События
Expected number of calls: >= 1 Received number of ...

test('calls onPlayHandler when the Play button is clicked startgame COMP', () => {
  const onClickPlay = jest.fn();
  act(() => {
    render(
      <Provider store={store}>
        <StartGame
          title="Game Name"
          description="Game Description"
          onHowToPlayHandler={() => {}}
          onPlayHandler={onClickPlay}
        />
      </Provider>
    )
  });

  const playButton = screen.getByText('startGame.play'); 
  userEvent.click(playButton);

  expect(onClickPlay).toHaveBeenCalled(); // expect(onClickPlay).toBeCalled()
});