Journey to write effective unit tests faster in React.js

📝Introduction

Hey everyone! 👋 Thanks to the AI revolution, writing unit tests has become much easier. However, it might not have advanced enough to handle complex components.

Writing unit tests for complex UI components can be overwhelming, especially if you haven't spent the time to learn the testing framework used in your application.

I hope this blog post can help you write unit tests effectively, and even at a blazingly speed. I'll share practical tips that I have learned from my experience in this post.

🤔Why it matters?

Unit testing is a crucial part of the development process and ensures the reliability of the software. I often see teams neglect to write them because of the "myth" that unit tests take too much time. While it does take some time to write them, it actually saves a lot of time in the future by reducing regression bugs in the application.

There are several advantages to writing unit tests quickly, among them I'd like to highlight what I think is really important.

Efficiency: It will speed up the development process, allowing teams to deliver features and updates more quickly.
Rapid feedback: Developers receive immediate feedback on code changes, helping them identify and fix issues very promptly.
Productivity: This is something I love the most. Developers can center their focus more on solving complex problems as they spend less time writing tests.

TL;DR:

Start by fully understanding the testing library and using it across different projects. Next, dive into how the components work. If you created them, even better! List the core features of the components that involve business logic. Gather the data you need to test, focusing on real user scenarios. Then, write unit tests based on this data. Use tools like Copilot chat and inline suggestions to make your tests even better and faster.

That was a quick and short summary of writing unit tests. If you'd like to know more details about each point I've mentioned, keep reading this post.

🧪 Unit Testing

Before we get to the tips, here are a few notes about unit tests that I have gathered. So, what are unit tests?

Definition: Unit tests are the simplest form of testing code, focusing on testing individual components.
Scope: Units in unit tests can be functions or classes in the codebase. The development team should decide what constitutes the best unit for them. Once the decision is made, communication within the team improves ultimately.

In React, the scope of unit tests is mostly components, hooks, or helper and utility functions or classes.

I used to get confused when writing unit tests for components in React, especially when a component renders another component. I often wondered, "Am I doing unit testing or integration testing?" However, I realized it doesn’t matter as long as you know which parts of the components you are testing. The key is to focus on the parent component’s capabilities and avoid writing tests that cover the child component's lines if they are not relevant to the parent’s coverage. If the parent component handles event handlers and server data, focus on that. If the child component is just about rendering, then write tests based on what it renders.

I always remember the fact about unit tests that I heard from Kent C. Dodds and public communities: write tests to gain confidence in the things you build. If the components are simple, then they don’t need unit tests.

💡Tips to write unit tests at a blazingly speed

Here, are some of my practical tips on write unit tests faster. I hope it helps.

Understand the unit testing framework

In most cases, you don't need to fully understand the testing framework; just knowing the basics is enough. There are often great examples of unit tests in your codebase written by senior developers. Learning from these examples will definitely help you write unit test code faster.
If you're the one beginning to write unit tests in your codebase, it's a good idea to thoroughly explore the testing framework.
Using the same testing framework repeatedly can eventually make you faster at writing test cases.
Example: Example: If you're using Jest and React Testing Library together, it's important to get comfortable with basic functions like describe, it, test, expect, and beforeEach.

describe('Todo_App', () => {
  it('should allow users to add a new todo item', () => {
    // Arrange: Set up the initial state and render the component
    render(<TodoApp />);
    const inputNode = screen.getByLabelText('Task name');

    // Act: Simulate user actions
    fireEvent.change(inputNode , { target: { value: 'New Todo' } });
    fireEvent.click(getByRole('button', { label: /Add/i } ));

    // Assert: Verify the expected outcome
    expect(getByText('New Todo')).toBeInTheDocument();
  });
});

Understand the implementation of the component you are testing

Dive deep into the component's code to understand its functionality and behavior. This knowledge will help you identify the critical areas that need testing. Use AI technologies to help you in understanding the component’s implementation
Identify and document the core features and functionalities of the component. Focus on those that involves business logic or are crucial to the component's state.
Example: TodoApp is a component that primarily focuses on rendering various inputs, handling add, edit, delete operations, and toggling a todo item. (It does not save the data to server, for simplicity of the example)
- Features list of todo component
  - It should display various input fields.
  - It should allow users to add one or more todo items.
  - It should allow users to delete a todo item.
  - It should allow users to edit a todo item.
  - It should allow users to toggle a todo item.

Identify Data Sources and Analyze Data Scenarios

Once you understood the component implementation, then next is to get to know more about the data that the component is responsible for handling. Determine where the data comes from. Is it fetched from an API, passed as props, or stored in a global state or context?
Understand the data structure and types that the component handles.
Consider different scenarios the component might encounter. This includes typical, edge, and error cases. Think about how the component should behave with empty data, large datasets, or malformed data.
Example: TodoApp component does not allow user to add empty todo item, it should show an error message below the input. It should not allow users to delete a todo item that is completed.

Prepare mock data

Create mock data that represents real-world scenarios. It ensure your tests are realistic and comprehensive.
Use tools like Jest's mock or spy functions to mock the methods.
Example: TodoApp is storing the todo items in the server. Mock the get call for fetching todo items and returns a mock data.

Leverage GitHub copilot to write unit tests for you

Copilot can create unit tests for you. If the components are simple, you can trust it to make tests quickly.
After you write a few test cases in the component, Copilot can suggest code snippets based on your code's context. Sometimes, it feels like Copilot knows what you're thinking.
It learns from the patterns in your codebase and can make test cases that match your current testing style.
Copilot can help you understand the component, list its features, write pseudo code, prepare mock data, and write tests. The only problem is that it works best with simple components. If a component has complex business logic, Copilot tries its best to help. I suggest using it as an assistant rather than the main tool for writing unit tests.

🎯Bottom line

Writing unit tests efficiently is essential for ensuring software reliability and speeding up the development process. By understanding the testing framework, diving into component functionality, documenting core features, preparing relevant mock data, and leveraging tools like GitHub Copilot, developers can write unit tests quickly and effectively. This is my approach towards writing unit tests which enhances my productivity and I hope this help you to write tests fast too.