Ambiente moderno para aplicativos React Native

Neste artigo, veremos como configurar 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.

Os desenvolvimentos modernos permitem a integração do Typescript no ambiente de desenvolvimento. Também podemos usar o VS Code, que suporta perfeitamente o Typecript.

Além disso, 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.

Expo é um conjunto de ferramentas que simplifica a criação de aplicativos React nativos. Neste tutorial, mostrarei como você pode criar rapidamente aplicativos nativos do React usando o Expo.

Crie um projeto

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

global de fios adicionar expo-cli

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

~/ 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 

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. Dessa forma, garantiremos um estilo de código uniforme e evitaremos complicações.

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

Em seguida, crie 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, basta verificar 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. Erros de tipo serão exibidos no editor ao desenvolver o aplicativo.

Além disso, por conveniência, adicione comandos para fios. Eles podem ser usados ​​para desenvolvimento local ou para verificação no estágio de integração contínua.
"Scripts": {
"Lint": "tslint '* .ts *'"
}

Tslint também suporta a capacidade de estender regras de validação instalando plugins. Neste ponto, adicionaremos suporte a eslint para as regras.
yarn add tslint-eslint-rules --dev

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

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

Testes de brincadeira e datilografia

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

Primeiro, você precisa instalar a estrutura e adicionar suporte para texto datilografado, pois a base de código é 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 - processa e compila código de teste de texto datilografado em javascript
• @ types / jest - adicione tipos do ambiente Jest
• react-native-testing-library - permite renderizar componentes React sem vincular ao 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 mudar um pouco para o ambiente React Native. O arquivo 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, adicione o comando para executar os testes no pacote.json:

Teste: teste de fios

Escrevemos testes para o Jest

Vamos tentar escrever um exemplo de testes para o Jest. Para fazer isso, crie o 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, execute 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. 

Todos os testes foram bem sucedidos. Mas, por enquanto, não podemos escrever testes para componentes. Vamos tentar expandir nosso ambiente para testar os componentes React Native.
Vamos precisar de mais um pacote - react-test-renderer. Ele fornece um mecanismo de renderização especial para o React que fornece estrutura Javascript em sua saída. Portanto, não precisamos configurar o DOM ou módulos nativos em um ambiente de teste.

adicionar fio -D react-test-renderer

Em seguida, atualize 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 em um ambiente de teste. Neste exemplo, obtivemos uma matriz de filhos da 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 comercial usando 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 do teste dentro dos componentes nativos do Jest for React é exatamente o mesmo que para um aplicativo React comum.

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