在 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)} />
    )

我正在尝试通过简单地检查是否正在调用该方法来测试它。该按钮是一个样式化的组件，return 是一个 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)

    })

但它并没有 return 它被调用。收到的电话数量保持为 0，我不知道为什么。有没有人可以帮助我？如有任何帮助，我们将不胜感激！

Answer 1

问题是你给 onClick 的东西必须是一个函数。

toggleDrawer(true) 是一个表达式，因此只在渲染时求值一次。

尝试() => toggleDrawer(true)。这样每次点击都会执行该函数

Answer 2

感谢 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)

    })

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

testing a simple onClick in react-testing-library not working. times called always 0

reactjs

jestjs

react-testing-library