Testare applicazioni React Native

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

In Facebook utilizziamo Jest per testare le applicazioni React Native.

Approfondisci il testing di un'app React Native funzionante leggendo la seguente serie: Parte 1: Jest - Gli snapshot entrano in gioco e Parte 2: Jest - Snapshot Redux per le tue Azioni e Reducer.

Configurazione

A partire dalla versione 0.38 di react-native, una configurazione Jest è inclusa di default quando si esegue react-native init. La seguente configurazione dovrebbe essere aggiunta automaticamente al tuo file package.json:

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  }
}

Esegui yarn test per lanciare i test con Jest.

suggerimento

Se stai aggiornando la tua applicazione react-native e in precedenza utilizzavi il preset jest-react-native, rimuovi la dipendenza dal tuo package.json e cambia il preset in react-native.

Test degli snapshot

Creiamo un test degli snapshot per un piccolo componente introduttivo con alcune view, componenti testuali e alcuni stili:

Intro.js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

class Intro extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          This is a React Native snapshot test.
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flex: 1,
    justifyContent: 'center',
  },
  instructions: {
    color: '#333333',
    marginBottom: 5,
    textAlign: 'center',
  },
  welcome: {
    fontSize: 20,
    margin: 10,
    textAlign: 'center',
  },
});

export default Intro;

Ora utilizziamo il renderer di test di React e la funzionalità snapshot di Jest per interagire con il componente, catturarne l'output renderizzato e creare un file snapshot:

__tests__/Intro-test.js

import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test('renders correctly', () => {
  const tree = renderer.create(<Intro />).toJSON();
  expect(tree).toMatchSnapshot();
});

Quando esegui yarn test o jest, verrà prodotto un file di output simile a questo:

__tests__/__snapshots__/Intro-test.js.snap

exports[`Intro renders correctly 1`] = `
<View
  style={
    Object {
      "alignItems": "center",
      "backgroundColor": "#F5FCFF",
      "flex": 1,
      "justifyContent": "center",
    }
  }>
  <Text
    style={
      Object {
        "fontSize": 20,
        "margin": 10,
        "textAlign": "center",
      }
    }>
    Welcome to React Native!
  </Text>
  <Text
    style={
      Object {
        "color": "#333333",
        "marginBottom": 5,
        "textAlign": "center",
      }
    }>
    This is a React Native snapshot test.
  </Text>
</View>
`;

Al successivo esecuzione dei test, l'output renderizzato verrà confrontato con lo snapshot creato in precedenza. Lo snapshot dovrebbe essere commitato insieme alle modifiche al codice. Quando un test degli snapshot fallisce, devi verificare se si tratta di un cambiamento intenzionale o accidentale. Se il cambiamento è previsto, puoi invocare Jest con jest -u per sovrascrivere lo snapshot esistente.

Il codice per questo esempio è disponibile su examples/react-native.

Configurazione del preset

Il preset configura l'ambiente ed è molto opinato, basandosi su ciò che abbiamo ritenuto utile in Facebook. Tutte le opzioni di configurazione possono essere sovrascritte proprio come possono essere personalizzate quando non viene utilizzato alcun preset.

Ambiente

react-native include un preset di Jest, quindi il campo jest.preset del tuo package.json dovrebbe puntare a react-native. Il preset è un ambiente node che simula l'ambiente di un'app React Native. Poiché non carica alcuna API DOM o del browser, migliora notevolmente il tempo di avvio di Jest.

Personalizzazione di transformIgnorePatterns

L'opzione transformIgnorePatterns può essere utilizzata per specificare quali file devono essere trasformati da Babel. Molti moduli npm react-native purtroppo non precompilano il loro codice sorgente prima della pubblicazione.

Per impostazione predefinita, il preset jest-react-native elabora solo i file sorgente del progetto e react-native. Se hai dipendenze npm che devono essere trasformate, puoi personalizzare questa opzione di configurazione includendo moduli diversi da react-native, raggruppandoli e separandoli con l'operatore |:

{
  "transformIgnorePatterns": ["node_modules/(?!((@)?react-native|my-project)/)"]
}

Puoi testare quali percorsi corrisponderebbero (e quindi verrebbero esclusi dalla trasformazione) con uno strumento come questo.

transformIgnorePatterns escluderà un file dalla trasformazione se il percorso corrisponde a qualsiasi pattern fornito. La suddivisione in più pattern potrebbe quindi avere risultati indesiderati se non si presta attenzione. Nell'esempio seguente, le esclusioni (note anche come asserzioni di lookahead negativo) per foo e bar si annullano a vicenda:

{
  "transformIgnorePatterns": ["node_modules/(?!foo/)", "node_modules/(?!bar/)"] // not what you want
}

setupFiles

Se desideri fornire una configurazione aggiuntiva per ogni file di test, puoi utilizzare l'opzione di configurazione setupFiles per specificare script di setup.

moduleNameMapper

moduleNameMapper può essere utilizzato per mappare un percorso di modulo a un modulo diverso. Di default, il preset mappa tutte le immagini a un modulo stub per immagini, ma se un modulo non può essere trovato questa opzione di configurazione può aiutare:

{
  "moduleNameMapper": {
    "my-module.js": "<rootDir>/path/to/my-module.js"
  }
}

Suggerimenti

Simulare moduli nativi utilizzando jest.mock

Il preset Jest integrato in react-native include alcune simulazioni predefinite applicate a un repository react-native. Tuttavia, alcuni componenti di react-native o di terze parti si basano su codice nativo per essere renderizzati. In questi casi, il sistema di simulazione manuale di Jest può aiutare a simulare l'implementazione sottostante.

Ad esempio, se il tuo codice dipende da un componente video nativo di terze parti chiamato react-native-video, potresti volerlo sostituire con una simulazione manuale come questa:

jest.mock('react-native-video', () => 'Video');

Questo renderà il componente come <Video {...props} /> con tutte le sue proprietà nell'output dello snapshot. Vedi anche avvertenze su Enzyme e React 16.

A volte è necessario fornire una simulazione manuale più complessa. Ad esempio, se vuoi trasmettere i tipi delle proprietà o i campi statici di un componente nativo a una simulazione, puoi restituire un componente React diverso da una simulazione tramite questo helper di jest-react-native:

jest.mock('path/to/MyNativeComponent', () => {
  const mockComponent = require('react-native/jest/mockComponent');
  return mockComponent('path/to/MyNativeComponent');
});

Oppure, se preferisci creare la tua simulazione manuale, puoi fare qualcosa come:

jest.mock('Text', () => {
  const RealComponent = jest.requireActual('Text');
  const React = require('react');
  class Text extends React.Component {
    render() {
      return React.createElement('Text', this.props, this.props.children);
    }
  }
  Text.propTypes = RealComponent.propTypes;
  return Text;
});

In altri casi potresti voler simulare un modulo nativo che non è un componente React. La stessa tecnica può essere applicata. Ti consigliamo di ispezionare il codice sorgente del modulo nativo e di registrarne il log durante l'esecuzione di un'app react native su un dispositivo reale, per poi modellare una simulazione manuale basata sul modulo reale.

Se finisci per simulare ripetutamente gli stessi moduli, è consigliabile definire queste simulazioni in un file separato e aggiungerlo alla lista di setupFiles.