How to use Jest to test components in react

Jest is a popular testing framework for JavaScript, commonly used for testing React applications. It provides a robust set of features for unit testing, integration testing, and snapshot testing. Here’s a guide on how to use Jest in a React application:

1. Setting Up Jest

If you’re using Create React App (CRA), Jest is already included and preconfigured. If you’re setting up Jest manually, follow these steps:

1. Install Jest and React Testing Library:

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

2. Add Jest Configuration (if not using CRA):

   You can configure Jest in your package.json or in a separate Jest config file (jest.config.js).

   Example jest.config.js:

   module.exports = {
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
   };
   

2. Writing Tests

Jest tests are typically written in files with a .test.js or .spec.js extension. You can write tests for React components, utility functions, and more.

Basic Example:

Here’s a simple example of how to write tests for a React component using Jest and React Testing Library.

Component to Test:

// src/components/Counter.js
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

Test File:

// src/components/Counter.test.js
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

test('renders Counter component and increments/decrements count', () => {
  render(<Counter />);

  // Verify initial count is 0
  const countElement = screen.getByText(/Count:/i);
  expect(countElement).toHaveTextContent('Count: 0');

  // Increment count
  fireEvent.click(screen.getByText(/Increment/i));
  expect(countElement).toHaveTextContent('Count: 1');

  // Decrement count
  fireEvent.click(screen.getByText(/Decrement/i));
  expect(countElement).toHaveTextContent('Count: 0');
});

3. Running Tests

To run tests, use the following command:

npm test

This command will start Jest in watch mode, running tests and watching for changes. You can also run tests once using:

npm test -- --watchAll=false

4. Advanced Jest Features

• Mocking: Jest allows you to mock functions, modules, and components to control their behavior during tests.

  Example: Mocking a module

  // __mocks__/axios.js
  export default {
    get: jest.fn(() => Promise.resolve({ data: {} }))
  };
  

  In a test file:

  import axios from 'axios';
  jest.mock('axios');
  
  test('fetches data', async () => {
    axios.get.mockResolvedValue({ data: { key: 'value' } });
  
    // Perform your test...
  });
  

• Snapshot Testing: Jest can generate and compare snapshots of your components to detect unexpected changes.

  Example:

  import React from 'react';
  import { render } from '@testing-library/react';
  import Counter from './Counter';
  
  test('matches snapshot', () => {
    const { asFragment } = render(<Counter />);
    expect(asFragment()).toMatchSnapshot();
  });
  

• Setup and Teardown: Jest provides beforeEach, afterEach, beforeAll, and afterAll hooks to manage setup and teardown of test environments.

  Example:

  beforeEach(() => {
    // Setup code
  });
  
  afterEach(() => {
    // Teardown code
  });
  

5. Integrating with CI/CD

Jest integrates well with Continuous Integration and Continuous Deployment (CI/CD) pipelines. It generates a test report that can be used by CI tools to ensure that tests are passing before deploying code.

Example Configuration for GitHub Actions:

# .github/workflows/test.yml
name: Run tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npm test