React Native应用程序的现代环境

React Native environment using expo-cli ， expo-cli, Typescript和 Typescript, and Jest设置 Jest. React Native环境的过程。

Typescript will help us avoid development mistakes and write a more efficient mobile application.

Typescript将帮助我们避免开发错误并编写更有效的移动应用程序。

Modern tools allow integrating Typescript into the development environment. We can also use VS Code that supports Typescript.

现代工具允许将Typescript集成到开发环境中。 我们也可以使用支持Typescript的VS Code。

与React Native的 Integration with React Native will give us the opportunity to use the auto-completion service, code navigation, and refactoring. 集成将使我们有机会使用自动完成服务，代码导航和重构。

Expo is a toolkit that simplifies the creation of native React applications. This tutorial will give you an idea of how you can quickly create native React applications using Expo.

Expo是一个工具包，可简化本地React应用程序的创建。 本教程将使您了解如何使用Expo快速创建本机React应用程序。

创建一个项目 (Creating a Project)

First, we install all the dependencies needed to create the application template from yarn.

首先，我们安装从yarn创建应用程序模板所需的所有依赖项。

yarn global add expo-cli 全球纱线展

Next, we initialize the React Native application and select the empty Typescript template.

接下来，我们初始化React Native应用程序并选择空的Typescript模板。

~/ expo init exampleApp 〜/ expo init exampleApp

? Choose a template: expo-template-blank-typescript

？ 选择一个模板：expo-template-blank-typescript

Please enter a few initial configuration values.

请输入一些初始配置值。

? Yarn v1.15.2 found. Use Yarn to install dependencies? Yes

？ 找到了纱线v1.15.2。 使用Yarn安装依赖项？ 是

Now we can launch the project and begin developing the application.

现在我们可以启动项目并开始开发应用程序。

cd exampleApp cd exampleApp

yarn start

纱线开始

Tslint配置 (Tslint Configuration)

Let's configure tslint to use VSCode or another editor correctly and see errors at the development stage. This will ensure a uniform code style and prevent complications.

让我们将tslint配置为正确使用VSCode或其他编辑器，并在开发阶段查看错误。 这将确保统一的代码样式并防止复杂化。

First we install the tslint package in the global directory:

首先，我们将tslint软件包安装在全局目录中：

yarn global add tslint 纱全球添加tslint

Next we create the tslint configuration:

接下来，我们创建tslint配置：

tslint --init tslint --init

This command will create the tslint.json file with the following configuration:

此命令将使用以下配置创建tslint.json文件：

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

Next, we check the typescript files using our configuration:

接下来，我们使用配置检查打字稿文件：

tslint 'src/**/*.ts' tslint'src / ** / *。ts'

After that, VS Code will automatically use the configuration file to validate the code in the editor. Type errors will be displayed in the editor in the process of app development.

之后，VS Code将自动使用配置文件在编辑器中验证代码。 类型错误将在应用开发过程中显示在编辑器中。

Also, for convenience, we add commands for yarn. These commands can be used for local development or for verification at the stage of continuous integration.

另外，为方便起见，我们添加了yarn的命令。 这些命令可用于本地开发或在持续集成阶段进行验证。

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

Tslint also makes it possible to extend validation rules by installing plugins. At this point, we will add the eslint rules support.

Tslint还可以通过安装插件来扩展验证规则。 至此，我们将添加eslint规则支持。

yarn add tslint-eslint-rules --dev 纱添加tslint-eslint-rules --dev

To add a plugin to the tslint configuration, we add the plugin name to the “extends” field:

要将插件添加到tslint配置，我们将插件名称添加到“扩展”字段：

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

开玩笑和打字稿测试 (Jest and tests on Typescript)

Jest is a framework for testing the Javascript code. It facilitates the testing, support, and development of React Native applications.

Jest是用于测试Javascript代码的框架。 它促进了React Native应用程序的测试，支持和开发。

First you need to install the framework and add typescript support, since the codebase was written with support for static typing.

首先，您需要安装框架并添加打字稿支持，因为代码库是使用静态类型支持编写的。

yarn add --dev jest ts-jest @types/jest 纱线添加--dev jest ts-jest @ types / jest

It is also worth installing additional packages:

还值得安装其他软件包：

• ts-jest — for compiling and processing typescript test code in Javascript
  ts-jest —用于在Javascript中编译和处理打字稿测试代码
• @ types / jest — for adding types from the Jest environment
  @ types / jest-用于从Jest环境添加类型
• react-native-testing-library — for rendering React components without DOM
  react-native-testing-library —用于渲染没有DOM的React组件

And the last step is to create a configuration file for the tests:

最后一步是为测试创建一个配置文件：

yarn ts-jest config:init 纱线ts-jest配置：初始化

This command will generate a configuration file from the template. We will tailor it to the React Native environment. The file should look like this:

此命令将从模板生成配置文件。 我们将根据React Native环境对其进行定制。 该文件应如下所示：

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

And finally, we should add the command to run the tests in package.json:

最后，我们应该在package.json中添加命令以运行测试：

«test»: «yarn test» «测试»：«纱线测试»

开玩笑的写作测试 (Writing Tests for Jest)

Let's try to write a sample test for Jest. To do this, we will create an App.test.tsx file:

让我们尝试为Jest编写一个示例测试。 为此，我们将创建一个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`);
  });
});

To run the tests, we execute the previously created yarn command:

要运行测试，我们执行先前创建的yarn命令：

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.

If you do all of the above correctly, tests should pass successfully. But you will still not be able to write tests for components. Let's expand the environment for testing React Native components.

如果正确执行上述所有操作，则测试应成功通过。 但是您仍然无法编写组件测试。 让我们扩展测试React Native组件的环境。

We need one more package — react-test-renderer. It provides a special rendering engine for React with a Javascript structure on the output. Therefore, we do not need to configure DOM or native modules in the test environment.

我们还需要一个软件包-react-test-renderer。 它为React提供了一个特殊的渲染引擎，在输出端带有Javascript结构。 因此，我们不需要在测试环境中配置DOM或本机模块。

yarn add -D react-test-renderer 纱线添加-D react-test-renderer

Next we update our App.test.tsx file with a simple test for the App.tsx component.

接下来，我们通过对App.tsx组件的简单测试来更新App.test.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!"
    );
  });
});

We can test native components in the test environment. In this example, we have obtained an array of child elements for the Text tag. This is a native component from the React Native package.

我们可以在测试环境中测试本机组件。 在此示例中，我们获得了Text标记的子元素数组。 这是React Native包中的一个本地组件。

结论 (Conclusion)

This technology stack has allowed us to quickly create an environment for developing native applications. Business logic based on static types makes the application more stable. Typescript's strong typing also helps avoid coding errors.

这种技术堆栈使我们能够快速创建用于开发本机应用程序的环境。 基于静态类型的业务逻辑使应用程序更加稳定。 Typescript的强类型输入还有助于避免编码错误。

Test development for React Native components within Jest is exactly the same as for regular React applications.

Jest中对React Native组件的测试开发与常规React应用程序完全相同。

I hope this article will help you overcome the initial stage of setting up an environment for developing React Native applications.

我希望本文将帮助您克服为开发React Native应用程序设置环境的初始阶段。

翻译自: https://habr.com/en/post/463975/