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

Proves i depuració

Següent ►
►

En aquest mòdul, aprendrem com assegurar-nos que les nostres aplicacions React Native funcionin correctament mitjançant proves i depuració. Aquest procés és crucial per garantir la qualitat del codi i l'experiència de l'usuari. Explorarem diferents tipus de proves, eines de depuració i millors pràctiques.

Continguts

  1. Introducció a les proves
  2. Proves unitàries
  3. Proves d'integració
  4. Proves d'extrem a extrem (E2E)
  5. Eines de depuració
  6. Millors pràctiques

Introducció a les proves

Les proves són una part essencial del desenvolupament de programari. Ens ajuden a detectar errors i assegurar-nos que el nostre codi funcioni com s'espera. Hi ha diversos tipus de proves que podem utilitzar:

  • Proves unitàries: Verifiquen la funcionalitat de petites unitats de codi, com ara funcions o components individuals.
  • Proves d'integració: Asseguren que diferents parts del sistema funcionin correctament quan es combinen.
  • Proves d'extrem a extrem (E2E): Simulen el comportament de l'usuari per verificar que l'aplicació funcioni correctament des del principi fins al final.

Proves unitàries

Les proves unitàries són fonamentals per assegurar-nos que cada part del nostre codi funcioni correctament de manera aïllada. En React Native, podem utilitzar biblioteques com Jest i Enzyme per escriure i executar proves unitàries.

Exemple de prova unitària amb Jest

// __tests__/sum.test.js
const sum = (a, b) => a + b;

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

Explicació

  • const sum = (a, b) => a + b;: Definim una funció simple que suma dos números.
  • test('adds 1 + 2 to equal 3', () => { ... });: Definim una prova que verifica que la funció sum funcioni correctament.
  • expect(sum(1, 2)).toBe(3);: Verifiquem que la suma de 1 i 2 sigui igual a 3.

Executar les proves

Per executar les proves, podem utilitzar la comanda següent:

npm test

Proves d'integració

Les proves d'integració asseguren que diferents components del sistema funcionin correctament quan es combinen. En React Native, podem utilitzar Enzyme juntament amb Jest per escriure proves d'integració.

Exemple de prova d'integració amb Enzyme

// __tests__/App.test.js
import React from 'react';
import { shallow } from 'enzyme';
import App from '../App';

describe('<App />', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<App />);
    expect(wrapper).toMatchSnapshot();
  });
});

Explicació

  • import { shallow } from 'enzyme';: Importem la funció shallow d'Enzyme per renderitzar el component de manera superficial.
  • describe('<App />', () => { ... });: Definim un conjunt de proves per al component <App />.
  • it('renders correctly', () => { ... });: Definim una prova que verifica que el component es renderitzi correctament.
  • expect(wrapper).toMatchSnapshot();: Verifiquem que la sortida del component coincideixi amb una instantània prèviament guardada.

Proves d'extrem a extrem (E2E)

Les proves d'extrem a extrem simulen el comportament de l'usuari per verificar que l'aplicació funcioni correctament des del principi fins al final. En React Native, podem utilitzar Detox per escriure i executar proves E2E.

Exemple de prova E2E amb Detox

// e2e/firstTest.spec.js
describe('Example', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });

  it('should show hello screen after tap', async () => {
    await element(by.id('hello_button')).tap();
    await expect(element(by.id('hello_screen'))).toBeVisible();
  });
});

Explicació

  • await device.launchApp();: Llancem l'aplicació abans de començar les proves.
  • await expect(element(by.id('welcome'))).toBeVisible();: Verifiquem que l'element amb l'ID welcome sigui visible.
  • await element(by.id('hello_button')).tap();: Simulem un toc en el botó amb l'ID hello_button.
  • await expect(element(by.id('hello_screen'))).toBeVisible();: Verifiquem que l'element amb l'ID hello_screen sigui visible després del toc.

Eines de depuració

Depurar el codi és una part crucial del desenvolupament. React Native ofereix diverses eines per ajudar-nos a depurar les nostres aplicacions:

  • React Developer Tools: Permet inspeccionar la jerarquia de components i l'estat dels components.
  • Redux DevTools: Si utilitzem Redux per a la gestió de l'estat, aquesta eina ens permet inspeccionar l'estat de l'aplicació i les accions.
  • Console.log: Una manera senzilla però efectiva de depurar el codi és utilitzar console.log per imprimir missatges a la consola.

Exemple d'ús de console.log

import React, { useState } from 'react';
import { View, Button } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    console.log('Button pressed');
    setCount(count + 1);
  };

  return (
    <View>
      <Button title="Press me" onPress={handlePress} />
    </View>
  );
};

export default App;

Explicació

  • console.log('Button pressed');: Imprimim un missatge a la consola cada vegada que es prem el botó.

Millors pràctiques

  • Escriure proves regularment: Escriure proves regularment ens ajuda a detectar errors abans que arribin a producció.
  • Utilitzar instantànies: Les proves d'instantànies ens permeten detectar canvis inesperats en la sortida dels components.
  • Depurar de manera eficient: Utilitzar les eines de depuració disponibles per identificar i solucionar problemes ràpidament.
  • Automatitzar les proves: Configurar un sistema d'integració contínua per executar les proves automàticament cada vegada que es realitzen canvis en el codi.

Conclusió

En aquest mòdul, hem après la importància de les proves i la depuració en el desenvolupament de React Native. Hem explorat diferents tipus de proves, com les proves unitàries, d'integració i d'extrem a extrem, i hem vist com utilitzar eines de depuració per identificar i solucionar problemes. Seguint aquestes pràctiques, podem assegurar-nos que les nostres aplicacions React Native siguin robustes i fiables.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats