在 React Native 应用程序中使用 Enzyme 进行快照测试-JavaScript中文网-JavaScript教程资源分享门户

什么是 Enzyme？

Enzyme 是一个 React 应用程序的 JavaScript 测试实用程序，它可以帮助您轻松地测试 React 组件的输出。Enzyme 是由 Airbnb 开发的，它提供了一组易于使用的 API，可以帮助您模拟 React 组件的渲染行为，并且可以轻松地创建和管理组件的快照测试。

为什么要使用快照测试？

快照测试是一种测试方法，它可以帮助您捕捉组件的渲染输出并将其存储在文件中。在以后的测试运行中，快照测试会比较组件的输出和存储的快照，以确保组件的输出与预期相同。快照测试可以帮助您捕捉 UI 更改和回归错误，并且可以大大减少手动测试的工作量。

如何在 React Native 中使用 Enzyme 进行快照测试？

在 React Native 应用程序中使用 Enzyme 进行快照测试需要一些配置。以下是一些步骤，可以帮助您在 React Native 应用程序中使用 Enzyme 进行快照测试：

步骤 1：安装 Enzyme

要使用 Enzyme 进行快照测试，您需要先安装 Enzyme。您可以使用 npm 或 yarn 安装 Enzyme：

npm install --save-dev enzyme

或者

yarn add --dev enzyme

步骤 2：安装 Enzyme 适配器

Enzyme 需要适配器来与 React Native 应用程序一起使用。您可以使用以下命令安装适配器：

npm install --save-dev enzyme-adapter-react-16

或者

yarn add --dev enzyme-adapter-react-16

步骤 3：配置 Enzyme

要配置 Enzyme，您需要在测试文件的顶部导入 Enzyme，并在测试运行之前配置适配器。以下是一个示例配置：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

步骤 4：创建快照测试

在您的测试文件中，您可以使用 Enzyme 的 shallow 方法来渲染组件并捕获其输出。您可以使用 Jest 提供的 toMatchSnapshot 方法将组件输出与存储的快照进行比较。以下是一个示例测试：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------

----------------------- -- -- -
  ---------- ------ ----------- -- -- -
    ----- ------- - -------------------- ----
    ----------------------------------
  ---
---

在第一次运行测试时，Jest 会自动创建一个快照文件。在以后的测试运行中，Jest 会比较组件的输出和存储的快照，以确保组件的输出与预期相同。

结论

在 React Native 应用程序中使用 Enzyme 进行快照测试可以帮助您捕捉 UI 更改和回归错误，并且可以大大减少手动测试的工作量。要使用 Enzyme 进行快照测试，您需要先安装 Enzyme 和适配器，然后配置 Enzyme，并使用 toMatchSnapshot 方法将组件输出与存储的快照进行比较。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67629185856ee0c1d405fcf3