Pruebas de aplicaciones React Native
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
En Facebook utilizamos Jest para probar aplicaciones de React Native.
Obtén una visión más profunda sobre cómo probar una aplicación React Native funcional leyendo la siguiente serie:
Configuración
A partir de la versión 0.38 de react-native, la configuración de Jest se incluye por defecto al ejecutar npx @react-native-community/cli init. La siguiente configuración debería agregarse automáticamente a tu archivo jest.config.js de React Native:
module.exports = {
preset: 'react-native',
};
Ejecuta yarn test para correr las pruebas con Jest.
Si estás actualizando tu aplicación de react-native y anteriormente usabas el preset jest-react-native o react-native, elimina la dependencia de tu archivo package.json y cambia el preset a react-native en jest.config.js.
Pruebas de instantáneas
Creemos una prueba de instantánea para un pequeño componente introductorio con algunas vistas, componentes de texto y estilos:
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;
Ahora usemos el renderizador de pruebas de React y la función de instantáneas de Jest para interactuar con el componente, capturar su salida renderizada y crear un archivo de instantánea:
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();
});
Cuando ejecutes yarn test o jest, se generará un archivo de salida como este:
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>
`;
La próxima vez que ejecutes las pruebas, la salida renderizada se comparará con la instantánea anterior. Esta instantánea debe guardarse junto con los cambios de código. Cuando falle una prueba de instantánea, debes inspeccionar si el cambio es intencional o no. Si el cambio es esperado, puedes ejecutar Jest con jest -u para sobrescribir la instantánea existente.
El código de este ejemplo está disponible en examples/react-native.
Configuración del preset
El preset configura el entorno de manera muy particular basándose en lo que hemos encontrado útil en Facebook. Todas las opciones de configuración pueden sobrescribirse, al igual que pueden personalizarse cuando no se usa un preset.
Entorno
react-native incluye un preset de Jest, por lo que el campo preset de tu jest.config.js debe apuntar a react-native. Este preset es un entorno Node que simula el entorno de una aplicación React Native. Como no carga APIs de DOM ni del navegador, mejora significativamente el tiempo de inicio de Jest.
Personalización de transformIgnorePatterns
La opción transformIgnorePatterns permite especificar qué archivos serán transformados por Babel. Lamentablemente, muchos módulos npm de react-native no precompilan su código fuente antes de publicarse.
Por defecto, el preset jest-react-native solo procesa los archivos fuente del proyecto y react-native. Si tienes dependencias npm que deben transformarse, puedes personalizar esta opción incluyendo módulos distintos a react-native, agrupándolos y separándolos con el operador |:
{
"transformIgnorePatterns": ["node_modules/(?!((@)?react-native|my-project)/)"]
}
Puedes probar qué rutas coincidirían (y por tanto serían excluidas de la transformación) con una herramienta como esta.
transformIgnorePatterns excluirá un archivo de la transformación si su ruta coincide con cualquier patrón proporcionado. Dividir en múltiples patrones podría tener resultados inesperados si no se tiene cuidado. En el siguiente ejemplo, las exclusiones (también conocidas como aserciones de inspección negativa) para foo y bar se cancelan mutuamente:
{
"transformIgnorePatterns": ["node_modules/(?!foo/)", "node_modules/(?!bar/)"] // not what you want
}
setupFiles
Si deseas proporcionar configuración adicional para cada archivo de prueba, puedes usar la opción de configuración setupFiles para especificar scripts de preparación.
Mapeo de nombres de módulos (moduleNameMapper)
La opción moduleNameMapper permite asignar una ruta de módulo a otro módulo diferente. Por defecto, el preset asigna todas las imágenes a un módulo simulado de imágenes (stub), pero si un módulo no se encuentra, esta opción de configuración puede ayudar:
{
"moduleNameMapper": {
"my-module.js": "<rootDir>/path/to/my-module.js"
}
}
Consejos
Simular módulos nativos usando jest.mock
El preset de Jest integrado en react-native incluye algunas simulaciones predeterminadas que se aplican en un repositorio de React Native. Sin embargo, algunos componentes de React Native o de terceros dependen de código nativo para renderizarse. En estos casos, el sistema de simulación manual de Jest puede ayudar a simular la implementación subyacente.
Por ejemplo, si tu código depende de un componente de video nativo de terceros llamado react-native-video, podrías sustituirlo con una simulación manual como esta:
jest.mock('react-native-video', () => 'Video');
Esto renderizará el componente como <Video {...props} /> con todas sus propiedades en la salida del snapshot. Consulta también las advertencias sobre Enzyme y React 16.
A veces necesitas proporcionar un mock manual más complejo. Por ejemplo, si deseas reenviar los tipos de propiedades o los campos estáticos de un componente nativo a un mock, puedes devolver un componente React diferente desde un mock a través de este ayudante de jest-react-native:
jest.mock('path/to/MyNativeComponent', () => {
const mockComponent = require('react-native/jest/mockComponent');
return mockComponent('path/to/MyNativeComponent');
});
O si prefieres crear tu propia simulación manual, puedes hacer algo como esto:
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;
});
En otros casos, es posible que desees simular un módulo nativo que no sea un componente de React. Se puede aplicar la misma técnica. Recomendamos inspeccionar el código fuente del módulo nativo y registrar el módulo al ejecutar una aplicación de React Native en un dispositivo real, y luego modelar una simulación manual a partir del módulo real.
Si terminas simulando los mismos módulos repetidamente, se recomienda definir estos mocks en un archivo separado y agregarlo a la lista de setupFiles.