Create Test Case using Jest library in React JS

Creating Unit Test Cases in React JS with Jest and React Testing Library

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.

LoginForm Component

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;
    

Test Cases for LoginForm

Now, we can write three types of test cases for the LoginForm component:

1. Valid Input and Submission Test Case
2. Invalid Input and Submission Test Case
3. Empty Fields Test Case

Before writing the test cases, 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

Create a new file named 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: '[email protected]' },
    });
    fireEvent.change(screen.getByPlaceholderText('Password'), {
        target: { value: 'password123' },
    });
    fireEvent.click(screen.getByText('Submit'));

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

2. Invalid Input and Submission Test Case

Create a new file named 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. Empty Fields Test Case

Create a new file named 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();
});
    

Running the Tests

Now, you just need to execute the following command to run the tests:

npm test
    

You should see the test results in your terminal.

Conclusion

By following the steps above, you can create basic unit test cases for your React components using Jest and React Testing Library. Testing ensures that your application behaves as expected and helps catch bugs early in the development process. Whether you're testing valid inputs, invalid inputs, or empty fields, these test cases will help you build a robust and reliable application.

Thanks for referring to this article. Hope it helps!