Untitled

// ButtonWithCounter.tsx
import React, { useState } from 'react'

const ButtonWithCounter: React.FC = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => setCount(count + 1)

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>You clicked {count} times</p>
    </div>
  )
}

export default ButtonWithCounter

// ButtonWithCounter.test.tsx

// Example A
import { render, screen, fireEvent } from '@testing-library/react'

import ButtonWithCounter from './ButtonWithCounter'

test('it calls the click handler when the button is clicked', () => {
  const handleClick = jest.fn()

  render(<button onClick={handleClick}>Click me</button>)

  const button = screen.getByText('Click me')

  fireEvent.click(button)

  expect(handleClick).toHaveBeenCalledTimes(1)
})

// Example B
test('it increments the counter when the button is clicked', () => {
  render(<ButtonWithCounter />)

  const button = screen.getByText('Click me')
  screen.getByText('You clicked 0 times')

  fireEvent.click(button)

  expect(screen.getByText('You clicked 1 times')).toBeInTheDocument()
})