1st Episode: Testing React components, a series.
Tags: javascript, react, testing, jest
Published: 2023-06-11 17:23:08

## 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.

```javascript
"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
```javascript
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
```javascript
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.