React Native 是一款跨平台的移动应用开发框架，可使用 JavaScript 和 React 创建原生 iOS 和 Android 应用。Enzyme 是一个流行的 JavaScript 测试工具，专门用于 React 应用的单元测试。在本文中，我们将讨论如何在 React Native 应用中使用 Enzyme 进行组件和交互测试。
Enzyme 简介
Enzyme 可与 React、React Native 和 React DOM 一起使用，使开发人员能够轻松地测试组件的输出和行为。它提供了一个方便的 API，用于查找、操纵和断言 React 组件的输出和状态。
Enzyme 是由 Airbnb 开发并维护的，它提供了三种不同的测试实用工具：Shallow、Mount 和 Render。
Shallow 测试
Shallow 测试仅测试组件的一层，所有孩子组件都被替换为一个固定的占位符。
------ - ------- - ---- --------- ------ ----------- ---- ---------------- ----------- ------- ---------- -- -- - ----- ------- - -------------------- ---- ---------------------------------- ---
在上面的示例中，我们首先导入了 shallow 函数，然后浅渲染了 MyComponent 组件。最后，我们使用 Jest 提供的快照测试来比较渲染输出与先前保存的快照，以确保组件按预期呈现。
Mount 测试
相比之下，Mount 测试将完全渲染组件及其子组件，并允许测试它们的行为和生命周期方法。
------ - ----- - ---- --------- ------ ----------- ---- ---------------- ----------- ------- -------- --- -------- --------- -- -- - ----- ----------- - ---------- ----- ------- - ------------------ --------------------- ---- ----------------------------------------- --------------------------------------- ---
在上面的示例中，我们首先导入了 mount 函数，然后完全渲染了 MyComponent 组件。然后，我们使用 find 函数来查找第一个 button 元素，并使用 simulate 函数来触发 onClick 事件。最后，我们使用 Jest 提供的 toHaveBeenCalled 方法确保 onClick 函数已被调用。
Render 测试
Render 测试与 Shallow 测试类似，但它使用渲染文件而不是真正的 React DOM 挂载到 DOM 中。
------ - ------ - ---- --------- ------ ----------- ---- ---------------- ----------- ------- ---------- -- -- - ----- ------- - ------------------- ---- ---------------------------------- ---
在上面的示例中，我们首先导入了 render 函数，然后渲染了 MyComponent 组件。最后，我们使用 Jest 提供的快照测试来比较渲染输出与先前保存的快照。
在 React Native 中使用 Enzyme
React Native 中的 Enzyme 测试与 React Web 应用程序的测试基本相同，只需要一些特定于平台的配置即可。
首先，我们需要安装 react-native-mock-render，以模拟 React Native 组件。您可以使用 npm 或 yarn 安装它：
--- ------- ---------- ------------------------
或者，
---- --- ----- ------------------------
然后，在测试文件中，我们需要将整个 React Native 导入到模拟中：
------ ----------- ---- ---------------------------
这样，任何使用 import ReactNative from 'react-native' 的 React Native 组件都将自动导入到模拟中。例如：
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
----- ----------- ------- --------- -
-------- -
------ -
--
------------ -------------
------
---------- -- - ----- -----------------
-------
---
--
-
-我们可以使用以下测试来浅渲染<MyComponent>：
------ ----------- ---- --------------------------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ------------------------- -- -- ------------- ----------- ------- ---------- -- -- - ----- ------- - -------------------- ---- ---------------------------------- ---
如果我们需要使用深层渲染来测试交互，我们可以使用以下测试：
------ ----------- ---- --------------------------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- ------------------------- -- -- ------------- ----------- ------- -------- --- -------- --------- -- -- - ----- ----------- - ---------- ----- ------- - ------------------ --------------------- ---- --------------------------------------------------------- --------------------------------------- ---
在上面的示例中，我们首先导入 React Native 模拟，然后使用 jest.mock 来模拟 React Native 组件。最后，我们使用 mount 函数来完全渲染 MyComponent 组件，并使用 find 和 at 函数来查找第一个 TouchableOpacity 并触发 onPress 事件，然后使用 Jest 提供的 toHaveBeenCalled 方法确保 onPress 已被调用。
结论
在本文中，我们讨论了如何在 React Native 应用中使用 Enzyme 进行组件和交互测试。学习了不同类型的测试，并提供了示例代码，说明了如何在 React Native 中使用它们。尽管 Enzyme 已经很复杂，但我们还是建议你去了解更多细节，以真正了解其内部运作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671223daad1e889fe202fae8