Configuración del entorno de testing en React

Why is it vital to implement testing techniques in your project?

The lack of testing can have serious consequences for any company: from economic losses to the deterioration of confidence in the product. Implementing testing techniques in your project not only protects you from these risks, but also guarantees the optimal performance of the software.

Throughout this course, we will work with Platzi Order, an order management application, using various testing techniques that we will explore in depth.

How to clone and prepare your repository for testing?

To start, it is essential to clone the Platzi Order project repository. From the terminal, run the following command:

git clone

Then, access the project folder and make sure to install the necessary dependencies to run the tests. If you use yarn, use the following command:

yarn install

If you prefer npm, then run

npm install

Once everything is installed, you are ready to configure and run the necessary tests.

What dependencies do you need to run tests?

Located inside the project, install the specific dependencies for the test environment with the following command:

yarn add -D

The -D argument indicates that these dependencies will be installed only in the development environment and not in production. The tools we will use are:

• Testing Library DOM: virtualizes a DOM in a testing environment.

• Testing Library Jest DOM: provides the necessary matchers.

• Testing Library React: provides utilities for testing React components.

• jsdom: adds more test configuration utilities.

• Vitest: our test runner for this project.

The project will be built on the Vite framework. If you are not familiar with it, check the specific course in the resources section.

How to configure the files to run tests?

With the dependencies installed, it is time to configure the project files. In the root of the project, create a new file called vitest.config.ts and enter the following configuration:

import { defineConfig } from 'vitest/config'; export default defineConfig({ test: { environment: 'jsdom', // Virtualize DOM globals: true, // Enable global matchers setupFiles: ['./src/setuptest.ts'] // Configuration file } });

Don't forget to create the src/setuptest.ts file, as specified in the setup. Make sure the name is accurate to avoid future errors.

How to create and manage testing scripts?

Finally, configure a script to run the tests inside the package.json file, in the scripts section:

"scripts": { "test": "vitest" }

Save the changes, go to the terminal and run:

yarn test

If you see an error stating that no test files were found, don't worry. This is completely normal as you have not yet configured test files.

In the next class we will cover how to create these files and start hands-on testing in your project.

Keep learning and improve your skills! 🚀