Ambiente moderno para reagir a aplicativos nativos

Neste artigo, consideraremos o processo de configuração de um ambiente React Native usando expo-cli , Typescript e Jest .
O texto datilografado nos ajudará a evitar erros de desenvolvimento e a escrever um aplicativo móvel mais eficiente.

As ferramentas modernas permitem a integração do Typescript no ambiente de desenvolvimento. Também podemos usar o código VS que suporta o Typecript.

A integração com o React Native nos dará a oportunidade de usar o serviço de preenchimento automático, navegação de código e refatoração.

O Expo é um kit de ferramentas que simplifica a criação de aplicativos React nativos. Este tutorial lhe dará uma idéia de como você pode criar rapidamente aplicativos nativos do React usando o Expo.

Criando um projeto

Primeiro, instalamos todas as dependências necessárias para criar o modelo de aplicativo a partir do fio.

global de fios adicionar expo-cli

Em seguida, inicializamos o aplicativo React Native e selecionamos o modelo Typescript vazio.

~ / expo init exampleApp
? Escolha um modelo: expo-template-blank-typescript
Digite alguns valores de configuração inicial.
? Fio v1.15.2 encontrado. Use o Yarn para instalar dependências? Sim

Agora podemos iniciar o projeto e começar a desenvolver o aplicativo.

cd exampleApp
início do fio

Configuração Tslint

Vamos configurar o tslint para usar o VSCode ou outro editor corretamente e ver os erros no estágio de desenvolvimento. Isso garantirá um estilo de código uniforme e evitará complicações.

Primeiro, instalamos o pacote tslint no diretório global:
fio global adicionar tslint

Em seguida, criamos a configuração tslint:
tslint --init

Este comando criará o arquivo tslint.json com a seguinte configuração:

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

Em seguida, verificamos os arquivos datilografados usando nossa configuração:
tslint 'src / ** / *. ts'

Depois disso, o VS Code usará automaticamente o arquivo de configuração para validar o código no editor. Os erros de tipo serão exibidos no editor no processo de desenvolvimento do aplicativo.

Além disso, por conveniência, adicionamos comandos para fios. Esses comandos podem ser usados ​​para desenvolvimento local ou para verificação no estágio de integração contínua.

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

O Tslint também possibilita estender as regras de validação instalando plugins. Neste ponto, adicionaremos o suporte de regras eslint.

yarn add tslint-eslint-rules --dev

Para adicionar um plug-in à configuração do tslint, adicionamos o nome do plug-in ao campo "extends":

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

Jest e testes em Typecript

Jest é uma estrutura para testar o código Javascript. Facilita o teste, o suporte e o desenvolvimento de aplicativos React Native.

Primeiro, você precisa instalar a estrutura e adicionar suporte para texto datilografado, pois a base de código foi escrita com suporte para digitação estática.

adição de fio --dev jest ts-jest @ types / jest

Também vale a pena instalar pacotes adicionais:

• ts-jest - para compilar e processar código de teste de texto datilografado em Javascript
• @ types / jest - para adicionar tipos do ambiente Jest
• react-native-testing-library - para renderizar componentes React sem DOM

E a última etapa é criar um arquivo de configuração para os testes:

configuração ts-jest do fio: init

Este comando irá gerar um arquivo de configuração a partir do modelo. Vamos adaptá-lo ao ambiente React Native. O arquivo deve ficar assim:

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

E, finalmente, devemos adicionar o comando para executar os testes no pacote.json:

Teste: teste de fios

Escrevendo testes para o Jest

Vamos tentar escrever um exemplo de teste para o Jest. Para fazer isso, criaremos um arquivo 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 executar os testes, executamos o comando yarn criado anteriormente:

 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. 

Se você fizer tudo isso corretamente, os testes deverão passar com sucesso. Mas você ainda não poderá escrever testes para componentes. Vamos expandir o ambiente para testar os componentes React Native.

Precisamos de mais um pacote - react-test-renderer. Ele fornece um mecanismo de renderização especial para o React com uma estrutura Javascript na saída. Portanto, não precisamos configurar o DOM ou os módulos nativos no ambiente de teste.

adicionar fio -D react-test-renderer

Em seguida, atualizamos nosso arquivo App.test.tsx com um teste simples para o 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 testar componentes nativos no ambiente de teste. Neste exemplo, obtivemos uma matriz de elementos filhos para a tag Text. Este é um componente nativo do pacote React Native.

Conclusão

Essa pilha de tecnologia nos permitiu criar rapidamente um ambiente para o desenvolvimento de aplicativos nativos. A lógica de negócios baseada em tipos estáticos torna o aplicativo mais estável. A digitação forte do TypeScript também ajuda a evitar erros de codificação.

O desenvolvimento de testes para componentes React Native no Jest é exatamente o mesmo que para aplicativos React regulares.

Espero que este artigo o ajude a superar o estágio inicial de configuração de um ambiente para o desenvolvimento de aplicativos React Native.