El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Proves i desplegament

Fi!

En aquesta secció, aprendrem com assegurar-nos que la nostra aplicació React funciona correctament mitjançant proves i com desplegar-la en un entorn de producció. Aquest és un pas crucial per garantir que l'aplicació sigui robusta i estigui preparada per als usuaris finals.

Proves

  1. Proves unitàries amb Jest

Jest és un marc de proves JavaScript que permet realitzar proves unitàries de manera senzilla i eficient.

Instal·lació de Jest

npm install --save-dev jest

Configuració de Jest

Afegiu el següent script al vostre package.json per executar Jest:

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

Exemple de prova unitària

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Per executar les proves, utilitzeu:

npm test

  1. Proves de components amb React Testing Library

React Testing Library és una eina que facilita la prova de components React de manera que reflecteixi com els usuaris interactuen amb l'aplicació.

Instal·lació de React Testing Library

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

Exemple de prova de component

// MyComponent.js
import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

// MyComponent.test.js
import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders Hello, World!', () => {
  const { getByText } = render(<MyComponent />);
  const linkElement = getByText(/Hello, World!/i);
  expect(linkElement).toBeInTheDocument();
});

  1. Proves de punta a punta amb Cypress

Cypress és una eina de proves de punta a punta que permet simular la interacció de l'usuari amb l'aplicació.

Instal·lació de Cypress

npm install --save-dev cypress

Configuració de Cypress

Afegiu el següent script al vostre package.json per executar Cypress:

"scripts": {
  "cypress:open": "cypress open"
}

Exemple de prova de punta a punta

// cypress/integration/sample_spec.js
describe('My First Test', () => {
  it('Visits the app', () => {
    cy.visit('http://localhost:3000');
    cy.contains('Hello, World!');
  });
});

Per executar Cypress, utilitzeu:

npm run cypress:open

Desplegament

  1. Construir l'aplicació per a producció

Per construir l'aplicació per a producció, utilitzeu el següent comandament:

npm run build

Això crearà una carpeta build amb tots els fitxers optimitzats per a producció.

  1. Desplegament a Netlify

Netlify és una plataforma popular per desplegar aplicacions web estàtiques.

Pas 1: Crear un compte a Netlify

Visiteu Netlify i creeu un compte.

Pas 2: Connectar el repositori

Connecteu el vostre repositori de GitHub, GitLab o Bitbucket a Netlify.

Pas 3: Configurar els paràmetres de desplegament

  • Branch to deploy: main (o la branca que utilitzeu)
  • Build command: npm run build
  • Publish directory: build

Pas 4: Desplegar

Feu clic a "Deploy site" i Netlify començarà a construir i desplegar la vostra aplicació.

  1. Desplegament a Vercel

Vercel és una altra plataforma popular per desplegar aplicacions React.

Pas 1: Crear un compte a Vercel

Visiteu Vercel i creeu un compte.

Pas 2: Connectar el repositori

Connecteu el vostre repositori de GitHub, GitLab o Bitbucket a Vercel.

Pas 3: Configurar els paràmetres de desplegament

  • Framework Preset: Create React App
  • Build and Output Settings: Deixeu els valors per defecte.

Pas 4: Desplegar

Feu clic a "Deploy" i Vercel començarà a construir i desplegar la vostra aplicació.

Resum

En aquesta secció, hem après com realitzar proves unitàries, de components i de punta a punta per assegurar-nos que la nostra aplicació React funciona correctament. També hem vist com desplegar l'aplicació en un entorn de producció utilitzant Netlify i Vercel. Amb aquestes eines i tècniques, podeu garantir que la vostra aplicació React sigui robusta i estigui preparada per als usuaris finals.

◄ Anterior
◄
Fi!

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats