在本文中，我们将考虑使用
expo-cli ，
Typescript和
Jest设置
React Native环境的过程。
Typescript将帮助我们避免开发错误并编写更有效的移动应用程序。
现代工具允许将Typescript集成到开发环境中。 我们也可以使用支持Typescript的VS Code。
与React Native的
集成将使我们有机会使用自动完成服务，代码导航和重构。
Expo是一个工具包，可简化本地React应用程序的创建。 本教程将使您了解如何使用Expo快速创建本机React应用程序。
建立专案
首先，我们安装从yarn创建应用程序模板所需的所有依赖项。
全球纱线展接下来，我们初始化React Native应用程序并选择一个空的Typescript模板。
〜/ expo init exampleApp
？ 选择一个模板：expo-template-blank-typescript
请输入一些初始配置值。
？ 找到了纱线v1.15.2。 使用Yarn安装依赖项？ 是的现在我们可以启动项目并开始开发应用程序。
cd exampleApp
纱线开始Tslint配置
让我们将tslint配置为正确使用VSCode或其他编辑器，并在开发阶段查看错误。 这将确保统一的代码样式并防止复杂化。
首先，我们将tslint软件包安装在全局目录中：
纱线全球添加tslint接下来，我们创建tslint配置：
tslint --init此命令将使用以下配置创建tslint.json文件：
{ "extends": ["tslint:recommended"], "jsRules": {}, "rules": {}, "rulesDirectory": [] }
接下来，我们使用配置检查打字稿文件：
tslint'src / ** / *。ts'之后，VS Code将自动使用配置文件在编辑器中验证代码。 类型错误将在应用程序开发过程中显示在编辑器中。
另外，为方便起见，我们添加了yarn的命令。 这些命令可用于本地开发或在持续集成阶段进行验证。
"scripts": { "lint": "tslint '*.ts*'" }
Tslint还可以通过安装插件来扩展验证规则。 至此，我们将添加eslint规则支持。
纱线添加tslint-eslint-rules --dev要将插件添加到tslint配置中，我们将插件名称添加到“扩展”字段中：
"extends": [ "tslint:recommended", "tslint-eslint-rules" ]
开玩笑和打字稿测试
Jest是用于测试Javascript代码的框架。 它促进了React Native应用程序的测试，支持和开发。
首先，您需要安装框架并添加打字稿支持，因为代码库是使用静态类型支持编写的。
毛线添加--dev jest ts-jest @类型/ jest还值得安装其他软件包：
- ts-jest-用于在Javascript中编译和处理打字稿测试代码
- @ types / jest-用于从Jest环境添加类型
- react-native-testing-library-用于渲染没有DOM的React组件
最后一步是为测试创建一个配置文件：
yarn ts-jest配置：init此命令将从模板生成配置文件。 我们将根据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)$" } };
最后，我们应该在package.json中添加命令以运行测试：
测试：纱线测试开玩笑的写作测试
让我们尝试为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`); }); });
要运行测试，我们执行先前创建的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.
如果正确执行上述所有操作，则测试应成功通过。 但是您仍然无法编写组件测试。 让我们扩展测试React Native组件的环境。
我们还需要一个软件包-react-test-renderer。 它为React提供了一个特殊的渲染引擎，在输出端带有Javascript结构。 因此，我们不需要在测试环境中配置DOM或本机模块。
纱线添加-D react-test-renderer接下来，我们通过对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!" ); }); });
我们可以在测试环境中测试本机组件。 在此示例中，我们获得了Text标记的子元素数组。 这是React Native包中的一个本地组件。
结论
这种技术堆栈使我们能够快速创建用于开发本机应用程序的环境。 基于静态类型的业务逻辑使应用程序更加稳定。 Typescript的强类型输入还有助于避免编码错误。
Jest中对React Native组件的测试开发与常规React应用程序完全相同。
我希望本文将帮助您克服为开发React Native应用程序建立环境的初始阶段。