Entorno moderno para aplicaciones React Native

En este artículo, veremos cómo configurar un entorno React Native usando expo-cli , Typescript y Jest .

El mecanografiado nos ayudará a evitar errores de desarrollo y a escribir una aplicación móvil más eficiente.

Los desarrollos modernos permiten integrar Typecript en el entorno de desarrollo. También podemos usar VS Code, que es perfectamente compatible con Typecript.

Además, la integración con React Native nos dará la oportunidad de usar el servicio de autocompletado, navegación de código y refactorización.

Expo es un conjunto de herramientas que simplifica la creación de aplicaciones nativas de React. En este tutorial, le mostraré cómo puede crear rápidamente aplicaciones nativas de React utilizando Expo.

Crear un proyecto

Primero, instale desde yarn todas las dependencias necesarias para crear la plantilla de la aplicación.

hilo global agregar expo-cli

A continuación, inicializamos la aplicación React Native y seleccionamos la plantilla de mecanografiar vacía.

~/ expo init exampleApp ? Choose a template: expo-template-blank-typescript Please enter a few initial configuration values. Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed ? Yarn v1.15.2 found. Use Yarn to install dependencies? Yes 

Ahora podemos comenzar el proyecto y comenzar a desarrollar la aplicación.

cd exampleApp
inicio de hilo

Configuración de Tslint

Configuraremos tslint para usar VSCode u otro editor correctamente y ver errores en la etapa de desarrollo. De esta forma aseguraremos un estilo de código uniforme y evitaremos su complicación.

Primero, instalamos el paquete tslint en el directorio global:
hilo global agregar tslint

A continuación, cree la configuración de tslint:
tslint --init

Este comando creará el archivo tslint.json con la siguiente configuración:

 { "extends": ["tslint:recommended"], "jsRules": {}, "rules": {}, "rulesDirectory": [] } 

A continuación, solo verifique los archivos de mecanografía utilizando nuestra configuración:
tslint 'src / ** / *. ts'

Después de eso, VS Code usará automáticamente el archivo de configuración para validar el código en el editor. Los errores de tipo se mostrarán en el editor al desarrollar la aplicación.

Además, por conveniencia, agregue comandos para hilo. Se pueden utilizar para el desarrollo local o para la verificación en la etapa de integración continua.
"Scripts": {
“Pelusa”: “tslint '* .ts *'”
}

Tslint también admite la capacidad de extender las reglas de validación mediante la instalación de complementos. En este punto agregaremos soporte de eslint para las reglas.
hilo agregar tslint-eslint-rules --dev

Para agregar un complemento a la configuración de tslint, simplemente agregue el nombre del complemento al campo extendido:

 "extends": [ "tslint:recommended", "tslint-eslint-rules" ] 

Jest y pruebas de mecanografía

Jest es un marco para probar el código Javascript. Facilita la prueba, el soporte y el desarrollo de una aplicación React Native.

Primero debe instalar el marco y agregar compatibilidad con el mecanografiado, ya que la base del código está escrita con compatibilidad para la escritura estática.

añadir hilo --dev jest ts-jest @ types / jest

También vale la pena instalar paquetes adicionales:

• ts-jest - procesa y compila código de prueba de mecanografiado en javascript
• @ types / jest : agrega tipos del entorno Jest
• reaccion-native-testing-library - permite renderizar componentes React sin vincularse al DOM

Y el último paso es crear un archivo de configuración para las pruebas:

hilo ts-jest config: init

Este comando generará un archivo de configuración a partir de la plantilla. Lo cambiaremos un poco para el entorno React Native. El archivo se verá así:

 module.exports = { jest: { preset: "react-native", transform: { "^.+\\.js$": "./node_modules/react-native/jest/preprocessor.js", "\\.(ts|tsx)$": "ts-jest" }, globals: { "ts-jest": { tsConfig: "tsconfig.json" } }, moduleFileExtensions: ["ts", "tsx", "js"], testRegex: "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$" } }; 

Y finalmente, agregue el comando para ejecutar las pruebas en package.json:

Prueba: prueba de hilo

Escribimos pruebas para Jest

Tratemos de escribir un ejemplo de pruebas para Jest. Para hacer esto, cree el archivo App.test.tsx:

 export const helloFn = (name?: String = "World") => `Hello, ${$name}`; describe("hello function", () => { it("should return `hello world`", () => { expect(helloFn()).toEqual(`Hello, World`); }); it("should return `hello name`", () => { expect(helloFn("Zuck")).toEqual(`Hello, Zuck`); }); }); 

Para ejecutar las pruebas, ejecute el comando de hilo creado previamente:

 yarn test PASS ./App.test.tsx hello function ✓ should return `hello world` (4ms) ✓ should return `hello name` (1ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1.316s Ran all test suites. Done in 2.74s. 

Todas las pruebas fueron exitosas. Pero por ahora, no podemos escribir pruebas para componentes. Intentemos expandir nuestro entorno para probar los componentes React Native.
Necesitaremos un paquete más: react-test-renderer. Proporciona un motor de renderizado especial para React que le da estructura Javascript en su salida. Por lo tanto, no necesitamos configurar DOM o módulos nativos en un entorno de prueba.

hilo añadido -D react-test-renderizador

A continuación, actualice nuestro archivo App.test.tsx con una prueba simple para el componente App.tsx.

 import React from "react"; import renderer from "react-test-renderer"; import App from "./App"; describe("App", () => { it("should display welcome message", () => { const tree = renderer.create(<App />); expect(tree.toJSON()).toMatchSnapshot(); expect(tree.root.findByType("Text").children).toContain( "Open up App.tsx to start working on your app!" ); }); }); 

Podemos probar componentes nativos en un entorno de prueba. En este ejemplo, obtuvimos una variedad de elementos secundarios de la etiqueta Text. Este es un componente nativo del paquete React Native.

Conclusión

Esta pila de tecnología nos permitió crear rápidamente un entorno para desarrollar aplicaciones nativas. La lógica empresarial que usa tipos estáticos hace que la aplicación sea más estable. La tipificación fuerte de mecanografiado también ayuda a evitar errores de codificación.
El desarrollo de pruebas dentro de Jest para los componentes React Native es exactamente el mismo que para una aplicación React normal.

Espero que este artículo le ayude a superar la etapa inicial de configuración del entorno para desarrollar aplicaciones React Native.