Create Test Case using Jest library in React JS

In this article, you will get an understanding of how we can create a basic Unit Test case in React JS

Creating automated test cases for a React application involves using testing libraries and frameworks like Jest and React Testing Library. For testing a LoginForm component, you would want to cover different scenarios like valid and invalid inputs, form submission, error handling, and more. Below, I'll provide an example of how to create test cases using Jest and React Testing Library.

Let's assume your LoginForm component looks something like this:

import React, { useState } from 'react';

const LoginForm = ({ onLogin }) => {

  const [email, setEmail] = useState('');

  const [password, setPassword] = useState('');

  const [error, setError] = useState('');

  const handleEmailChange = (event) => {

    setEmail(event.target.value);

  };

  const handlePasswordChange = (event) => {

    setPassword(event.target.value);

  };

  const handleSubmit = (event) => {

    event.preventDefault();

    // Basic validation

    if (!email.includes('@')) {

      setError('Invalid email address');

      return;

    }

    // Simulate login

    if (email === '[email protected]' && password === 'password123') {

      onLogin();

    } else {

      setError('Invalid credentials');

    }

  };

  return (

    <form onSubmit={handleSubmit}>

      <div>

        <label htmlFor="email">Email</label>

        <input

          type="email"

          id="email"

          value={email}

          placeholder='Email'

          onChange={handleEmailChange}

        />

      </div>

      <div>

        <label htmlFor="password">Password</label>

        <input

          type="password"

          id="password"

          value={password}

          placeholder='Password'

          onChange={handlePasswordChange}

        />

      </div>

      {error && <div>{error}</div>}

      <button type="submit">Submit</button>

    </form>

  );

};

export default LoginForm;

Now, we can write three types of test cases for that

1. Valid Input and Submission Test Case

2. Invalid Input and Submission Test Case

3. Empty Fields Test Case

before that, execute this command to install the required dependencies

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

1. Valid Input and Submission Test Case: first need to Create the

buttonValidInput.test.js

import React from 'react';

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

import LoginForm from '../loginForm';

test('valid input and submission', () => {

  render(<LoginForm />);

 

  fireEvent.change(screen.getByPlaceholderText('Email'),

     { target: { value: 'user' } });

  fireEvent.change(screen.getByPlaceholderText('Password'),

     { target: { value: 'password' } });

  fireEvent.click(screen.getByText('Submit'));

  expect(screen.queryByText('Invalid credentials')).toBeNull();

});

2. Invalid Input and Submission Test Case: create the new file buttonInValidInput.test.js

import React from 'react';

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

import LoginForm from '../loginForm';

test('invalid input and submission', () => {

    render(<LoginForm />);

   

    fireEvent.change(screen.getByPlaceholderText('Email'),

     { target: { value: 'invaliduser' } });

    fireEvent.change(screen.getByPlaceholderText('Password'),

     { target: { value: 'wrongpassword' } });

    fireEvent.click(screen.getByText('Submit'));

 

    expect(screen.getByText('Invalid email address')).toBeInTheDocument();

  });

3. Fields Test Case: create the new file buttonEmptyInput.test.js

import React from 'react';

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

import LoginForm from '../loginForm';

test('empty fields submission', () => {

    render(<LoginForm />);

   

    fireEvent.click(screen.getByText('Submit'));

 

    expect(screen.getByText('Invalid email address')).toBeInTheDocument();

  });

 

Now you just need to execute the cmd

npm test

see the result

Thanks for referring to this article, hope it will help