What are some examples of Test-Driven Development in React?

What are some examples of Test-Driven Development in React?

Test-Driven Development (TDD) in React involves writing tests before implementing features. For example, you can start by writing a test for a simple component like a button.

Can you show me a specific example of a test for a button component?

Sure! You can use Jest and React Testing Library. Here's a simple test:

import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renders button with text', () => {
  render(<Button text="Click Me" />);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

What if I want to test a button click event?

You can extend your test to simulate a click event. Here's how:

import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('button click calls the onClick handler', () => {
  const handleClick = jest.fn();
  render(<Button text="Click Me" onClick={handleClick} />);
  fireEvent.click(screen.getByText(/click me/i));
  expect(handleClick).toHaveBeenCalledTimes(1);
});