Enzyme 是一个流行的 React 测试工具，它可以帮助我们测试 React 组件的各种行为和状态。在 React Native 中，我们同样可以使用 Enzyme 来进行布局测试。本篇文章将介绍如何使用 Enzyme 进行 React Native 布局测试，并提供具体实例代码。
安装 Enzyme
Enzyme 目前支持 React 16 以上版本，所以我们需要确保我们的 React Native 应用程序的 React 版本兼容 Enzyme。我们可以通过以下命令安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
这里我们没有指定具体的测试框架，比如 Jest 或 Mocha。因为 Enzyme 是一个独立的测试工具，可以集成到任何测试框架中。
配置 Enzyme
安装 Enzyme 后，我们需要为其选择一个适配器。Enzyme 官网 currently supports React 16 以上版本，所以我们需要使用 enzyme-adapter-react-16 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这段代码应该在所有测试文件的开头处被执行，比如在一个 setupTests.js 文件中。
测试布局
一旦 Enzyme 安装和配置完成，我们就可以开始测试 React Native 的布局了。我们使用 Enzyme 的 shallow 方法来渲染 React Native 组件，并且断言它们所包含的元素和样式是否正确。
测试元素
以下是一个使用 shallow 方法测试元素的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- - ---- ---------
---------------- -- -- -
---------- ------ ---- ----------- -- -- -
----- ------- - -------------------- ---------------
------------------------------- ---------------------
---
---这个测试用例使用了 shallow 方法将 Text 组件渲染成虚拟DOM。然后我们使用 contains 方法断言虚拟DOM是否包含了我们期望的文本内容。
测试样式
我们也可以使用 getProp 方法来测试组件是否渲染了我们期望的样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- - ---- ---------
----- ------ - -------------------
---------- - ----- -- ---------------- ------- --
---
---------------- -- -- -
---------- ------ ---- ------- ------- -- -- -
----- ------- - ------------- ------------------------ ----
--------------------------------------------------------
---
---这个测试用例首先在一个 StyleSheet 中定义了我们期望的样式。然后我们使用 getProp 方法来获取 style 属性，并断言它与我们期望的样式对象完全相等。
总结
使用 Enzyme 进行 React Native 布局测试可以大幅度减少手动测试的工作量，并提高测试的准确性和可靠性。请根据你的需要选择适合的 Enzyme 版本，并参照本篇文章的示例代码编写测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e1f5d48841e9894de0efa