Testing Functional Components

Functional components are a vital part of React applications. Testing these components ensures that they behave as expected, providing a solid foundation for application reliability.

• Unit Testing: Testing individual components in isolation.
• Jest: A JavaScript testing framework commonly used with React.
• React Testing Library: A library for testing React components, encouraging good testing practices.

3.1 Setting Up the Testing Environment

• Install Jest and React Testing Library using npm:

npm install --save-dev @testing-library/react @testing-library/jest-dom

• Create test files alongside your components, typically with a .test.js extension.

3.2 Writing Your First Test

Here’s an example of testing a simple functional component:

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

test('renders MyComponent with title', () => {
    render(<MyComponent />);
    const titleElement = screen.getByText(/hello world/i);
    expect(titleElement).toBeInTheDocument();
});

3.3 Running the Tests

Use the following command to run your tests:

npm test

• Keep tests isolated and independent.
• Write descriptive test names to clarify what each test is verifying.
• Mock external dependencies to focus on the component behavior.