A Practical Approach to Mastering React Testing with Jest and Enzyme

Want to conquer the world of React development with confidence by ensuring the reliability and quality of your codebase?

Then it’s time to Master React Testing, because it not only strengthens the reliability of your code but also empowers you as a developer to foster innovation and experimentation, and promotes collaboration within your team. 

So suit up, get ready to embrace React testing as your trusty sidekick, and explore the particle approaches to mastering it with the powerful combination of Jest and Enzyme. 

Well, before going into the practical implementation of testing React apps with Jest and Enzyme, let's take a look at what React testing means and its basic types. 

‍

What is React Testing?

React testing refers to the process of testing React components and applications to ensure their functionality, reliability, and adherence to the desired behavior. The process typically involves writing test cases that simulate user interactions, component rendering, and state changes to verify that the application behaves as intended.

‍

What are the different types of React testing?

There are several types of testing used in software development. However, the types of React testing that are commonly used include:

1. Unit Testing: It tests the individual components in isolation to ensure they work as expected.
2. Integration Testing: It verifies the interaction and integration between different components within an application.
3. Component Testing: It is a subset of unit testing that focuses explicitly on testing React components. 
4. Snapshot testing: It is a technique used to capture and compare snapshots of React component outputs.
5. End-to-End (E2E) Testing: It involves testing the entire application from the user's perspective.
6. Accessibility Testing: It focuses on ensuring that the applications are accessible to users with disabilities.

‍

While these are the main types of React testing, the specific approach and tools used may vary based on the project requirements, team preferences, and available resources. The goal is to adopt a comprehensive testing strategy that covers various aspects of the React application. 

For React testing app developers often prefer Jest with Enzyme, React Testing Library, and Mocha. However, in this blog, we will primarily focus on popular React testing libraries like “Jest” and testing utilities like “Enzyme”.

‍

React Testing with the Jest and Enzyme

Jest and Enzyme have gained significant popularity within the React ecosystem. Many developers and companies have adopted these tools for their testing needs. This widespread adoption means that there is a wealth of knowledge, best practices, and community-driven tooling available, making it easier to onboard new team members or find help when needed.

Moreover, Jest and Enzyme play complementary roles in DOM testing within a React application.

‍

Jest:

It is a JavaScript testing framework that serves as the foundation for testing React applications. It provides a test runner, assertion library, and utilities for mocking and code coverage. Jest enables you to write, execute, and manage test suites for your React components, including DOM testing.

‍

Enzyme:

It is a JavaScript testing utility specifically designed for testing React components. It provides a set of APIs that simplify the testing of React components, including DOM manipulation and traversal. It allows you to render React components, interact with them, and make assertions on their rendered output and behavior.

So, let’s find out how to use them for testing your React application.

Note: If you're using “Create React App”, Jest is already included and ready to use for testing your React app. You can write your tests in the “src” directory alongside your components, and Jest will take care of running them for you.

To use Jest and Enzyme for testing, you'll need to follow a series of steps. Here's a general overview of the process:

‍

1. Install the necessary dependencies:

• Jest : A testing framework for JavaScript applications.
• Enzyme : A testing utility for React components.

You can install them using npm or yarn:

‍

2. Create a setup file and Configure Enzyme to work with Jest:

Create a setup file (e.g., setupTests.js) in your project's root directory. Inside the file, configure Enzyme to use the appropriate adapter. For example, if you're using React 16, your “setupTests.js” file should look like this:

‍

3. Write your tests for each component:

Create a test file (e.g., ExampleComponent.test.js) for each component you want to test. In this file, import the necessary dependencies and write your tests using Jest and Enzyme. 

For example,

In the above example, the first test ensures that the component renders without throwing any errors. The second test verifies that the rendered component contains a element with the expected text.

4. Run the tests:

You can now run your tests using the Jest test runner. Open your terminal and execute the following command:

Jest will automatically discover and run all the test files with the .test.js or .spec.js extension.

This is a basic outline of how to use Jest and Enzyme for testing your React app. You can explore more advanced techniques and features provided by Jest and Enzyme, such as mocking, snapshot testing, and more, depending on your specific needs.

‍

Testing a Simple Login Form with Jest and Enzyme: A Practical Implementation Tutorial

The following example demonstrates the implementation details of testing a React form component with Jest and Enzyme. In this example, we'll test a simple login form that validates the username and password inputs.

Assume we have the following component named “LoginForm.js”:

‍
Now, let's write some tests for this component using Jest and Enzyme.

In this example, we have written tests to check if the login form renders correctly, if the username and password inputs update the component state correctly, and if an error message is displayed when invalid credentials are entered.

Remember to configure Jest and Enzyme in your test environment, including installing the necessary dependencies (jest and enzyme) and setting up Enzyme's adapter for React.

By writing tests like these, you can ensure that your React components behave correctly, handle user interactions properly, and display the expected outputs based on different scenarios.

‍

Here are the other examples where you can use Jest and Enzyme for React Testing. 

‍

1. Asynchronous Actions:

In React applications, asynchronous actions like API calls are common. You can use Jest's mocking capabilities and Enzyme's shallow rendering to test components that make asynchronous calls. Mock the API calls using Jest's jest.mock() function and simulate different API response scenarios to ensure proper handling in the component.

‍

2. Redux Integration:

If your application uses Redux for state management, you can write tests to validate the integration between React components and Redux. Use Enzyme's mount function to render the component along with the Redux store. Simulate user interactions and verify if the component dispatches the expected actions and updates the store correctly.

‍

3. React Router:

If your application utilizes React Router for navigation and routing, you can write tests to ensure proper navigation and rendering of components based on different routes. Use Enzyme's mount function to render the component along with the router context. Simulate navigation and assert if the correct components are rendered based on the defined routes.

‍

The Key Benefits of React Testing in App Development

React Testing bring several key benefits to your app development:

‍

1. Reliability: 

Testing helps ensure that your React components and application work as intended. By writing tests, you can verify that your components render correctly, handle user interactions properly, and produce the expected outputs. This increases reliability and reduces the likelihood of bugs and issues in the app.

‍

2. Code Confidence: 

Having comprehensive test coverage gives you confidence in your codebase. When you make changes or add new features, you can run the tests and ensure that existing functionality remains intact. This confidence allows you to refactor code, implement new features, or make modifications without fear of breaking existing functionality.

‍

3. Maintainability: 

Testing makes your codebase more maintainable in the long run. By having tests in place, it becomes easier to identify and fix issues when they arise. Tests act as documentation for how your components should behave, making it easier for other developers to understand and work on the codebase. Tests also help catch regressions, ensuring that previously working functionality continues to work as expected.

‍

4. Time and Cost Savings: 

While writing tests requires an upfront investment of time, it can save time and costs in the long term. Tests can catch issues early in the development cycle, reducing the time spent on manual testing and debugging. Automated tests can be run repeatedly, providing quick feedback on the state of your application and catching issues before they reach production.

‍

5. Collaboration and Team Efficiency: 

Tests promote collaboration among team members. By having a shared set of tests, everyone can understand the expected behavior of components and contribute to the codebase confidently. Tests also help identify issues and facilitate communication between developers, testers, and stakeholders, leading to more efficient collaboration and problem-solving.

‍

6. Refactoring and Continuous Improvement: 

Testing enables refactoring and continuous improvement of your codebase. With tests in place, you can refactor code with confidence, knowing that the tests will catch any regressions. Additionally, as you write tests, you gain insights into the design and structure of your code, allowing you to identify areas for improvement and make your code more modular and maintainable.

‍

7. Better User Experience: 

By thoroughly testing your React components, you can ensure a better user experience. Tests help catch UI inconsistencies, edge cases, and usability issues that might otherwise go unnoticed. This leads to a more polished and user-friendly application.

‍

Ensure Your React App Works as Intended With React Testing

Jest and Enzyme together form a powerful combination for React testing. They enable you to write comprehensive tests for React components, simulate user interactions, test component behavior, and ensure the reliability and quality of your React applications

Mastering React testing with Jest and Enzyme empowers you to build reliable and high-quality React applications. By adopting particle approaches such as writing basic component tests, simulating user interactions, testing component lifecycle, mocking dependencies, and utilizing snapshot testing, you can ensure your React components work as intended.

Jest and Enzyme provide a powerful combination of tools and APIs to streamline your React testing workflow and improve the overall quality of your React applications. 

Well, if you are building a React application with TypeScript or JavaScript try using DhiWise React builder and generate clean code in minutes from your app design. 

The code generated with DhiWise is highly scalable, testable, and easy to maintain and it also gives complete code ownership to its users. 

‍Learn more about DhiWise and its advanced features and how to accelerate your app development with real-world use cases.

     npm install --save-dev jest enzyme enzyme-adapter-react-16
     

     import Enzyme from 'enzyme';
    import Adapter from 'enzyme-adapter-react-16';
    Enzyme.configure({ adapter: new Adapter() });
     

     import React from 'react';
    import { shallow } from 'enzyme';
    import ExampleComponent from './ExampleComponent';
    
    describe('ExampleComponent', () => {
      it('renders without crashing', () => {
        shallow(<ExampleComponent />);
      });
    
      it('displays the correct text', () => {
        const wrapper = shallow(<ExampleComponent />);
        const text = wrapper.find('p').text();
        expect(text).toEqual('Hello, Jest and Enzyme!');
      });
    });
    
     

     import React, { useState } from 'react';
    
    const LoginForm = () => {
      const [username, setUsername] = useState('');
      const [password, setPassword] = useState('');
      const [error, setError] = useState('');
    
      const handleUsernameChange = (event) => {
        setUsername(event.target.value);
      };
    
      const handlePasswordChange = (event) => {
        setPassword(event.target.value);
      };
    
      const handleSubmit = (event) => {
        event.preventDefault();
    
        if (username === 'admin' && password === 'password') {
          // Perform login logic
        } else {
          setError('Invalid credentials');
        }
      };
    
      return (
        <form onSubmit={handleSubmit}>
          <input type="text" value={username} onChange={handleUsernameChange} placeholder="Username" />
          <input type="password" value={password} onChange={handlePasswordChange} placeholder="Password" />
          <button type="submit">Login</button>
          {error && <div className="error">{error}</div>}
        </form>
      );
    };
    
    export default LoginForm;
     

     import React from 'react';
    import { shallow } from 'enzyme';
    import LoginForm from '../LoginForm';
    
    describe('LoginForm', () => {
      it('renders the login form', () => {
        const wrapper = shallow(<LoginForm />);
        expect(wrapper.find('form')).toHaveLength(1);
        expect(wrapper.find('input')).toHaveLength(2);
        expect(wrapper.find('button')).toHaveLength(1);
      });
    
      it('updates the username state on input change', () => {
        const wrapper = shallow(<LoginForm />);
        const usernameInput = wrapper.find('input[type="text"]');
        const event = { target: { value: 'testuser' } };
    
        usernameInput.simulate('change', event);
        expect(wrapper.find('input[type="text"]').prop('value')).toEqual('testuser');
      });
    
      it('updates the password state on input change', () => {
        const wrapper = shallow(<LoginForm />);
        const passwordInput = wrapper.find('input[type="password"]');
        const event = { target: { value: 'testpassword' } };
    
        passwordInput.simulate('change', event);
        expect(wrapper.find('input[type="password"]').prop('value')).toEqual('testpassword');
      });
    
      it('displays an error message for invalid credentials', () => {
        const wrapper = shallow(<LoginForm />);
        const form = wrapper.find('form');
        const event = { preventDefault: jest.fn() };
    
        form.simulate('submit', event);
        expect(wrapper.find('.error')).toHaveLength(1);
        expect(wrapper.find('.error').text()).toEqual('Invalid credentials');
      });
    });