Entorno moderno para reaccionar aplicaciones nativas

En este artículo, consideraremos el proceso de configuración de un entorno React Native utilizando 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.

Las herramientas modernas permiten integrar Typecript en el entorno de desarrollo. También podemos usar el código VS que admite Typecript.

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 juego de herramientas que simplifica la creación de aplicaciones nativas de React. Este tutorial le dará una idea de cómo puede crear rápidamente aplicaciones nativas de React usando Expo.

Creando un proyecto

Primero, instalamos todas las dependencias necesarias para crear la plantilla de aplicación a partir de hilo.

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
? Elija una plantilla: expo-template-blank-typescript
Ingrese algunos valores de configuración iniciales.
? Hilo v1.15.2 encontrado. ¿Usar Yarn para instalar dependencias? Si

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

cd exampleApp
inicio de hilo

Configuración de Tslint

Configuremos tslint para usar VSCode u otro editor correctamente y ver errores en la etapa de desarrollo. Esto asegurará un estilo de código uniforme y evitará complicaciones.

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

A continuación creamos la configuración tslint:
tslint --init

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

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

A continuación, verificamos 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 en el proceso de desarrollo de la aplicación.

Además, por conveniencia, agregamos comandos para hilo. Estos comandos se pueden usar para el desarrollo local o para la verificación en la etapa de integración continua.

 "scripts": { "lint": "tslint '*.ts*'" } 

Tslint también permite extender las reglas de validación mediante la instalación de complementos. En este punto, agregaremos el soporte de reglas de eslint.

hilo agregar tslint-eslint-rules --dev

Para agregar un complemento a la configuración de tslint, agregamos el nombre del complemento al campo "extiende":

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

Broma y pruebas en mecanografiado

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

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

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

También vale la pena instalar paquetes adicionales:

• ts-jest - para compilar y procesar código de prueba de mecanografiado en Javascript
• @ types / jest: para agregar tipos del entorno Jest
• reaccion-native-testing-library - para representar componentes React sin 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 adaptaremos al entorno React Native. El archivo debería verse 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, debemos agregar el comando para ejecutar las pruebas en package.json:

Prueba: prueba de hilo

Pruebas de escritura para Jest

Tratemos de escribir una prueba de muestra para Jest. Para hacer esto, crearemos un 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, ejecutamos 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. 

Si hace todo lo anterior correctamente, las pruebas deben pasar con éxito. Pero aún no podrá escribir pruebas para componentes. Expandamos el entorno para probar los componentes React Native.

Necesitamos un paquete más: react-test-renderer. Proporciona un motor de representación especial para React con una estructura Javascript en la salida. Por lo tanto, no necesitamos configurar DOM o módulos nativos en el entorno de prueba.

hilo añadido -D react-test-renderizador

A continuación, actualizamos 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 el entorno de prueba. En este ejemplo, hemos obtenido una matriz de elementos secundarios para la etiqueta Text. Este es un componente nativo del paquete React Native.

Conclusión

Esta pila de tecnología nos ha permitido crear rápidamente un entorno para desarrollar aplicaciones nativas. La lógica empresarial basada en tipos estáticos hace que la aplicación sea más estable. El tipeo fuerte de Typecript también ayuda a evitar errores de codificación.

El desarrollo de pruebas para los componentes React Native dentro de Jest es exactamente el mismo que para las aplicaciones React normales.

Espero que este artículo lo ayude a superar la etapa inicial de configurar un entorno para desarrollar aplicaciones React Native.