El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, aprenderemos cómo realizar pruebas y desplegar nuestra aplicación React. Este es un paso crucial para asegurar que nuestra aplicación funcione correctamente y esté disponible para los usuarios finales.

Pruebas

Pruebas Unitarias con Jest

¿Qué es Jest?

Jest es un framework de pruebas de JavaScript mantenido por Facebook, que se utiliza para probar aplicaciones React. Es fácil de configurar y usar, y proporciona una serie de características útiles como pruebas asíncronas, mocks y snapshots.

Configuración de Jest

Para configurar Jest en tu proyecto React, sigue estos pasos:

Instalación:

npm install --save-dev jest
npm install --save-dev @testing-library/react @testing-library/jest-dom

Configuración en package.json: Asegúrate de que tu package.json tenga la siguiente configuración:
```
{
  "scripts": {
    "test": "jest"
  }
}
```

Escribiendo una Prueba Unitaria

Vamos a escribir una prueba unitaria simple para un componente React.

Componente: Button.js

import React from 'react';

const Button = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

export default Button;

Prueba: Button.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Button from './Button';

test('renders button with label', () => {
  const { getByText } = render(<Button label="Click Me" />);
  expect(getByText('Click Me')).toBeInTheDocument();
});

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button label="Click Me" onClick={handleClick} />);
  fireEvent.click(getByText('Click Me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Pruebas de Extremo a Extremo con Cypress

¿Qué es Cypress?

Cypress es una herramienta de pruebas de extremo a extremo que permite probar la funcionalidad completa de una aplicación web en un navegador real.

Configuración de Cypress

Para configurar Cypress en tu proyecto React, sigue estos pasos:

Instalación:
```
npm install --save-dev cypress
```
Configuración en package.json: Asegúrate de que tu package.json tenga la siguiente configuración:
```
{
  "scripts": {
    "cypress:open": "cypress open"
  }
}
```
Ejecución de Cypress:
```
npm run cypress:open
```

Escribiendo una Prueba de Extremo a Extremo

Vamos a escribir una prueba de extremo a extremo simple para nuestra aplicación.

Prueba: button.spec.js

describe('Button Component', () => {
  it('should render the button and respond to click', () => {
    cy.visit('/');
    cy.contains('Click Me').click();
    cy.get('button').should('have.text', 'Click Me');
  });
});

Despliegue

Despliegue en Vercel

Vercel es una plataforma de despliegue que facilita la implementación de aplicaciones React. Aquí te mostramos cómo desplegar tu aplicación en Vercel.

Pasos para Desplegar en Vercel

Registro e Inicio de Sesión: Regístrate e inicia sesión en Vercel.
Importar Proyecto:
- Haz clic en "New Project".
- Selecciona el repositorio de GitHub donde está alojada tu aplicación React.
Configuración del Proyecto:
- Configura los ajustes del proyecto según tus necesidades.
- Asegúrate de que el comando de construcción (build command) esté configurado correctamente, por ejemplo: npm run build.
Desplegar:
- Haz clic en "Deploy" y espera a que Vercel construya y despliegue tu aplicación.

Despliegue en Netlify

Netlify es otra plataforma popular para el despliegue de aplicaciones web. Aquí te mostramos cómo desplegar tu aplicación en Netlify.

Pasos para Desplegar en Netlify

Registro e Inicio de Sesión: Regístrate e inicia sesión en Netlify.
Nuevo Sitio desde Git:
- Haz clic en "New site from Git".
- Selecciona el repositorio de GitHub donde está alojada tu aplicación React.
Configuración del Proyecto:
- Configura los ajustes del proyecto según tus necesidades.
- Asegúrate de que el comando de construcción (build command) esté configurado correctamente, por ejemplo: npm run build.
Desplegar:
- Haz clic en "Deploy site" y espera a que Netlify construya y despliegue tu aplicación.

Conclusión

En esta sección, hemos aprendido cómo realizar pruebas unitarias y de extremo a extremo para asegurar la calidad de nuestra aplicación React. También hemos visto cómo desplegar nuestra aplicación en plataformas populares como Vercel y Netlify. Con estos conocimientos, estás listo para asegurar que tu aplicación React esté bien probada y disponible para los usuarios finales. ¡Felicidades por llegar hasta aquí! Ahora estás preparado para construir y desplegar aplicaciones React de alta calidad.

Pruebas y Despliegue

Pruebas

Pruebas Unitarias con Jest

¿Qué es Jest?

Configuración de Jest

Escribiendo una Prueba Unitaria

Pruebas de Extremo a Extremo con Cypress

¿Qué es Cypress?

Configuración de Cypress

Escribiendo una Prueba de Extremo a Extremo

Despliegue

Despliegue en Vercel

Pasos para Desplegar en Vercel

Despliegue en Netlify

Pasos para Desplegar en Netlify

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa