在本文中，我们将研究使用
expo-cli ，
Typescript和
Jest设置
React Native环境。
Typescript将帮助我们避免开发错误并编写更有效的移动应用程序。
现代开发允许将Typescript集成到开发环境中。 我们还可以使用VS Code，它完全支持Typescript。
而且，与
React Native的 集成将使我们有机会使用自动完成服务，代码导航和重构。
Expo是一套工具，可简化本机React应用程序的创建。 在本教程中，我将向您展示如何使用Expo快速创建本机React应用程序。
建立专案
首先，从yarn安装创建应用程序模板所需的所有依赖项。
全球纱线展接下来，我们初始化React Native应用程序并选择一个空的Typescript模板。
~/ 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
现在我们可以开始项目并开始开发应用程序。
cd exampleApp
纱线开始Tslint配置
我们将tslint配置为正确使用VSCode或其他编辑器，并在开发阶段查看错误。 这样，我们将确保统一的代码样式并防止其复杂化。
首先，我们将tslint软件包安装在全局目录中：
纱线全球添加tslint接下来，创建tslint配置：
tslint --init此命令将使用以下配置创建tslint.json文件：
{ "extends": ["tslint:recommended"], "jsRules": {}, "rules": {}, "rulesDirectory": [] }
接下来，只需使用我们的配置检查打字稿文件：
tslint'src / ** / *。ts'之后，VS Code将自动使用配置文件在编辑器中验证代码。 开发应用程序时，类型错误将显示在编辑器中。
另外，为方便起见，添加纱线命令。 它们可以用于本地开发或在持续集成阶段进行验证。
“脚本”：{
“ Lint”：“ tslint'* .ts *'”
}
Tslint还支持通过安装插件来扩展验证规则的功能。 此时，我们将为规则添加eslint支持。
纱线添加tslint-eslint-rules --dev
要将插件添加到tslint配置，只需将插件名称添加到extends字段即可：
"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-允许渲染React组件而无需绑定到DOM
最后一步是为测试创建一个配置文件：
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编写测试
让我们尝试为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应用程序而设置环境的初始阶段。