Unit Testing with Jest in React JS

Unit testing is a method of testing individual units of functionality in your code. In React applications, this typically means testing components, hooks, or utility functions. Jest is a popular JavaScript testing framework commonly used for unit testing in React.

Why Use Jest?

  • Built-in support for assertions, mocking, and spies.
  • Fast and reliable test execution.
  • Seamless integration with React and JavaScript projects.

Setting Up Jest in a React Project

Jest is pre-configured when using Create React App (CRA). If you are using CRA, you can start writing tests immediately. For custom setups, install Jest using the following command:

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

Example 1: Testing a Functional Component

The example below demonstrates testing a simple React component:

  
  // Greeting.js
  import React from 'react';

  function Greeting({ name }) {
      return 
Hello, {name || 'Guest'}!
;
  }

  export default Greeting;
  
      
  
  // Greeting.test.js
  import { render, screen } from '@testing-library/react';
  import Greeting from './Greeting';

  test('renders greeting for a guest', () => {
      render();
      expect(screen.getByText('Hello, Guest!')).toBeInTheDocument();
  });

  test('renders greeting for a specific name', () => {
      render();
      expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

Example 2: Testing a Component with State

Here is an example of testing a component that uses state:

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

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

      return (
          

              
Count: {count}

              
          

      );
  }

  export default Counter;
  
      
  
  // Counter.test.js
  import { render, screen, fireEvent } from '@testing-library/react';
  import Counter from './Counter';

  test('renders initial count and increments', () => {
      render();
      const button = screen.getByText('Increment');
      const countText = screen.getByText('Count: 0');

      fireEvent.click(button);
      expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });

Example 3: Testing Utility Functions

Jest can also be used to test utility functions separately:

  
  // mathUtils.js
  export function add(a, b) {
      return a + b;
  }
  
      
  
  // mathUtils.test.js
  import { add } from './mathUtils';

  test('adds two numbers', () => {
      expect(add(2, 3)).toBe(5);
      expect(add(-1, 1)).toBe(0);
  });

Mocking in Jest

Jest allows you to mock modules, functions, or APIs for isolated testing:

  
  // fetchData.js
  export async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      return response.json();
  }
  
      
  
  // fetchData.test.js
  import { fetchData } from './fetchData';

  jest.mock('./fetchData', () => ({
      fetchData: jest.fn(),
  }));

  test('fetches and returns data', async () => {
      fetchData.mockResolvedValue({ id: 1, title: 'Test Post' });

      const data = await fetchData();
      expect(data).toEqual({ id: 1, title: 'Test Post' });
  });

Best Practices for Unit Testing

  • Test behavior rather than implementation details.
  • Write tests for critical and reusable components or functions.
  • Use descriptive test names to explain the purpose of the test.
  • Run tests frequently during development to catch errors early.

Unit testing with Jest in React applications ensures the stability and reliability of your components and logic. By following the examples and best practices above, you can build robust test suites for your projects.




Advertisement