Testando aplicativos React Native

Tradução Beta Não Oficial

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

No Facebook, usamos o Jest para testar aplicativos React Native.

Obtenha uma compreensão mais profunda sobre como testar um aplicativo React Native funcional lendo a série: Parte 1: Jest - Os snapshots entram em cena e Parte 2: Jest - Snapshots do Redux para suas Actions e Reducers.

Configuração

A partir da versão 0.38 do react-native, uma configuração do Jest é incluída por padrão ao executar react-native init. A seguinte configuração deve ser automaticamente adicionada ao seu arquivo package.json:

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

Execute yarn test para rodar os testes com Jest.

"message": "dica"

Se você está atualizando seu aplicativo react-native e usava anteriormente o preset jest-react-native, remova a dependência do seu arquivo package.json e altere o preset para react-native.

Teste de Snapshot

Vamos criar um teste de snapshot para um pequeno componente introdutório com algumas views, componentes de texto e estilos:

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;

Agora vamos usar o test renderer do React e o recurso de snapshot do Jest para interagir com o componente, capturar a saída renderizada e criar um arquivo de 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 você executar yarn test ou jest, será gerado um arquivo de saída como este:

__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>
`;

Na próxima execução dos testes, a saída renderizada será comparada com o snapshot criado anteriormente. O snapshot deve ser commitado junto com as alterações de código. Quando um teste de snapshot falhar, você precisa inspecionar se a mudança foi intencional ou não. Se a mudança for esperada, execute o Jest com jest -u para sobrescrever o snapshot existente.

O código deste exemplo está disponível em examples/react-native.

Configuração do preset

O preset configura o ambiente de maneira bastante opinativa, baseado no que consideramos útil no Facebook. Todas as opções de configuração podem ser sobrescritas, assim como podem ser personalizadas quando nenhum preset é usado.

Ambiente

O react-native vem com um preset do Jest, então o campo jest.preset do seu package.json deve apontar para react-native. O preset é um ambiente Node que simula o ambiente de um aplicativo React Native. Por não carregar nenhuma API de DOM ou navegador, ele melhora significativamente o tempo de inicialização do Jest.

Personalização do transformIgnorePatterns

A opção transformIgnorePatterns especifica quais arquivos serão transformados pelo Babel. Infelizmente, muitos módulos npm do react-native não pré-compilam seu código-fonte antes de publicar.

Por padrão, o preset jest-react-native processa apenas os arquivos fonte do próprio projeto e o react-native. Se você tiver dependências npm que precisam ser transformadas, personalize esta opção incluindo módulos além do react-native, agrupando-os e separando-os com o operador |:

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

Você pode testar quais caminhos seriam correspondidos (e consequentemente excluídos da transformação) com uma ferramenta como esta.

O transformIgnorePatterns excluirá um arquivo da transformação se o caminho corresponder a qualquer padrão fornecido. Dividir em múltiplos padrões pode ter resultados inesperados se não for feito com cuidado. No exemplo abaixo, as exclusões (conhecidas como asserções de lookahead negativo) para foo e bar se cancelam:

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

setupFiles

Se você quiser fornecer configurações adicionais para cada arquivo de teste, a opção de configuração setupFiles pode ser usada para especificar scripts de inicialização.

moduleNameMapper

O moduleNameMapper pode ser usado para mapear um caminho de módulo para um módulo diferente. Por padrão, o pré-configurado mapeia todas as imagens para um módulo esboço de imagem, mas se um módulo não puder ser encontrado, esta opção de configuração pode ajudar:

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

Dicas

Simule módulos nativos usando jest.mock

O pré-configurado do Jest integrado ao react-native vem com algumas simulações padrão aplicadas em um repositório react-native. No entanto, alguns componentes do react-native ou de terceiros dependem de código nativo para serem renderizados. Nesses casos, o sistema de simulação manual do Jest pode ajudar a simular a implementação subjacente.

Por exemplo, se seu código depende de um componente de vídeo nativo de terceiros chamado react-native-video, você pode querer substituí-lo com uma simulação manual como esta:

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

Isso renderizará o componente como <Video {...props} /> com todas as suas propriedades na saída do snapshot. Veja também advertências sobre Enzyme e React 16.

Às vezes você precisa fornecer uma simulação manual mais complexa. Por exemplo, se quiser encaminhar os tipos de propriedade ou campos estáticos de um componente nativo para uma simulação, você pode retornar um componente React diferente de uma simulação através deste auxiliar do jest-react-native:

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

Ou se você quiser criar sua própria simulação manual, pode fazer algo assim:

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;
});

Em outros casos, você pode querer simular um módulo nativo que não é um componente React. A mesma técnica pode ser aplicada. Recomendamos inspecionar o código-fonte do módulo nativo e registrar o módulo ao executar um aplicativo React Native em um dispositivo real e, em seguida, modelar uma simulação manual com base no módulo real.

Se você acabar simulando os mesmos módulos repetidamente, é recomendável definir essas simulações em um arquivo separado e adicioná-lo à lista de setupFiles.