React测试库ToHaveBeencalled 0嘲笑一个简单的单击道具

Question

我尝试模拟一个名为Action Clicked的道具，但我的测试失败了，我的组件很简单，因为

const ButtonAction: React.FC = ({ actionClicked }) => {
    const handleClick = (action) => () => actionClicked(action)
  
    return (
          <div
            data-testid="some-action"
            onClick={handleClick('something')}
          >
              <Icon />
          </div>
    )
  }

这是我的测试，button.spec.tsx，

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import React from 'react'

import ButtonAction from './ButtonAction'

test('render ButtonAction', () => {
  const actionClicked = jest.fn()

  render(<ButtonAction actionClicked={actionClicked} />)

  userEvent.click(screen.getByTestId('some-action'))
  expect(actionClicked).toHaveBeenCalled() //failed here
})

我不确定为什么未调用Action> Action CliceClicked。

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

有什么想法吗？

Answer 1

此行为之所以发生，是因为userevent.click返回承诺。

首先，您应该将测试变成async，然后等待userevent.click：

test("render ButtonAction", async () => {
  const actionClicked = jest.fn();

  render(<ButtonAction actionClicked={actionClicked} />);

  await userEvent.click(screen.getByTestId("some-action"));

  expect(actionClicked).toHaveBeenCalledTimes(1);
});