如何用 Jest 快速建立 React Native 项目？

如果你是一名前端开发者，那么你很可能已经听说过 Jest。Jest 是 Facebook 开源的一个测试框架，用于测试 JavaScript 项目。同时，Jest 也支持 React Native 项目的测试。在本篇文章中，我们将深入探讨如何使用 Jest 快速建立 React Native 项目。

安装 Jest

首先，我们需要在我们的 React Native 项目中安装 Jest。在终端中运行以下命令：

npm install jest --save-dev

配置 Jest

安装 Jest 后，我们需要在项目根目录中创建一个 jest.config.js 文件，以进行 Jest 的配置。以下是一份常用的配置文件示例：

module.exports = {
  preset: "react-native",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  setupFiles: ["./jest.setup.js"],
  transformIgnorePatterns: [
    "node_modules/(?!(react-native)/)",
    "node_modules/(?!(jest-)?react-native)",
    "node_modules/@babel",
  ],
  testPathIgnorePatterns: ["/node_modules/", "/e2e/"],
};

其中，preset 用于指定 Jest 根据哪些语言的预设进行测试。moduleFileExtensions 用于指定项目中哪些文件需要被测试。setupFiles 用于指定运行测试之前需要执行的文件。transformIgnorePatterns 用于指定哪些文件不需要被转换。testPathIgnorePatterns 则用于指定哪些测试文件不需要被运行。

编写测试代码

接下来，我们开始编写测试代码。在项目根目录中创建 tests 文件夹，并在其中创建一个名为 App.test.js 的文件。以下是一个常用的测试代码示例：

import React from "react";
import { render } from "@testing-library/react-native";
import App from "../App.js";

describe("<App />", () => {
  it("renders correctly", () => {
    const { getByTestId } = render(<App />);
    expect(getByTestId("exampleElement")).toBeDefined();
  });
});

其中，我们使用了 @testing-library/react-native 依赖库提供的 render API 进行渲染，并使用 expect 断言进行测试。在断言中，我们使用了 getByTestId 方法获取指定组件，并使用 toBeDefined 方法判断该组件是否存在。可以根据具体情况编写不同的测试用例。

运行测试代码

最后，我们需要在终端中运行以下命令进行项目的测试：

npm test

Jest 将自动查找 tests 文件夹中的测试文件并执行测试代码。如果测试顺利通过，我们将会看到类似以下的输出：

PASS  __tests__/App.test.js
  <App />
    ✓ renders correctly (31ms)

总结

本篇文章中，我们介绍了如何用 Jest 快速建立 React Native 项目。小伙伴们可以根据具体情况进行调整和拓展，进一步挖掘 Jest 的功能和潜力，提升自己的测试能力。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aa2671add4f0e0ff3b6241