在 react-testing-library 中测试一个简单的 onClick 不起作用。调用次数始终为 0

Question

我有以下非常简单的组件：

  const { openDrawer, setOpenDrawer } = useContext(DrawerContext)

    const toggleDrawer = (open: boolean) => {
        setOpenDrawer(open)
    }

    return (
        <Button data-testid="ClickIndicator" onClick={() => toggleDrawer(true)} />
    )

我试图通过简单地检查是否正在调用该方法来测试它。该按钮是一个样式组件，它返回一个 div 现在我正在尝试使用以下测试来测试此组件：

    it('should open drawer when ClickIndicator is clicked', () => {
        const mockOnClick = jest.fn()
        const { getByTestId } = render(<Button />)
      
        const clickIndicator = getByTestId('ClickIndicator')

        fireEvent.click(clickIndicator)

        expect(mockOnClick).toHaveBeenCalledTimes(1)

    })

但它只是不会将它作为被调用返回。收到的呼叫数保持为 0，我不知道为什么。有没有人可以帮助我？任何帮助，将不胜感激！

Answer 1

感谢laserany和zjb的帮助，我可以通过执行以下操作来修复它！非常感谢！

我愚蠢地没有像我应该的那样将模拟功能传递给按钮。

  it('should open drawer when ClickIndicator is clicked', () => {
        const mockOnClick = jest.fn()
        const { getByTestId } = render(<Button onClick={mockOnClick()} />)
      
        const clickIndicator = getByTestId('ClickIndicator')

        fireEvent.click(clickIndicator)

        expect(mockOnClick).toHaveBeenCalledTimes(1)

    })