1st Episode: Testing React components, a series.

Introduction

This series of posts will guide you through the process of testing React components, covering a range of examples starting from easy ones and gradually diving into more in-depth scenarios. While it may take some time to complete the series, I'll make an effort to include challenging examples as well. Additionally, I encourage you to share any specific cases you would like me to cover. If I find them valuable for the broader audience, I will gladly incorporate them into the series.

By exploring different testing techniques for React components, this series aims to equip developers with the knowledge and skills necessary to effectively test their applications. Whether you're a beginner looking to grasp the basics or an experienced developer seeking advanced testing strategies, this series will provide insights and practical guidance.

Feel free to follow along, and don't hesitate to reach out if you have any questions or need further clarification. Let's embark on this journey of mastering React component testing together!

Tools

In this posts i will be using jest and react testing library **which usually both of them are included in starting projects but if you don't have them include it you can do a simple **npm install --save-dev jest if you are using npm.
And then you will have to add the following to the package.json.

"scripts": {
 "test": "jest"
}

This case is specific for react components but i would encourage you to check your specific case in google.

Testing your first component

We will begin by exploring a straightforward yet practical component. It features a conditional statement, and we will examine the testing approach for this particular component.

FirstComponent.tsx

const FirstComponent = ({name?: string}) => {
 if(data){
   return <div>{name}</div>
 }
return <div>Component without name</div>
}

export default FirstComponent;

Now the test for it:

FirstComponent.test.tsx

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

test('renders the FirstComponent correctly without a name', () => {
 **get** render(<FirstComponent />);
  const divElement = screen.getByText(/without/i);
  expect(divElement).toBeInTheDocument();
});

test('renders the FirstComponent correctly with a name', () => {
  render(<FirstComponent name="Lautaro" />);
  const divElement = screen.getByText(/Lautaro/i);
  expect(divElement).toBeInTheDocument();
});

Now let's take apart the code:

• First I'm import render and screen from react testing library. The render function will basically render the component into a fake DOM which we'll be able to query later. The screen will be that querying interface where we will be able to get the rendered method in this case using getBytext.

• I've chosen to call the test function twice instead of using an alternative approach because it provides clearer separation and identification of the tests. Additionally, I'm not explicitly importing the test and expect functions since they are Jest helpers that are automatically available within the testing environment.

• In the end, I am conducting tests for two distinct scenarios due to the presence of an if statement in the component. Depending on whether the component receives a name prop, it will render one outcome, and if not, it will render a different outcome. I accomplish this by selectively passing or omitting the prop, which is optional in this case. By examining the rendered HTML, I am able to capture specific text within it to determine the expected outcome.