тестирование простого 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 я смог исправить это, выполнив следующие действия! спасибо большое!

Я по глупости не передавал функцию mock кнопке, как должен.

  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)

    })

Answer 2

Проблема в том, что то, что вы передаете onClick, должно быть функцией.

toggleDrawer(true) - это выражение, поэтому оно оценивается только один раз при рендеринге.

Попробуйте () => toggleDrawer(true). Таким образом, каждый раз, когда вы щелкаете, функция будет выполняться.