在 React Native 开发中，ScrollView 是一个非常常用的组件。通过 ScrollView 组件，我们可以实现滚动条效果，使得我们的页面中能够装下更多的内容。
在编写 React Native 应用程序时，我们需要对组件进行测试，以确保它们能够正常工作。今天，我们将讨论如何在 Jest 测试 React Native 的 ScrollView 组件。
安装依赖
在测试 ScrollView 组件时，我们需要使用以下依赖：
- Jest
- react-test-renderer
- enzyme
在项目根目录下，运行以下命令以安装这些依赖：
npm install --save-dev jest react-test-renderer enzyme enzyme-adapter-react-16
编写测试用例
我们将编写两个测试用例：
- 测试 ScrollView 组件是否正常工作（渲染）
- 测试 ScrollView 组件滚动页数
测试 ScrollView 组件是否正常工作
我们可以使用 react-test-renderer 将 ScrollView 类型组件渲染成纯 JavaScript 对象，然后断言。
import React from 'react';
import { ScrollView } from 'react-native';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(<ScrollView />).toJSON();
expect(tree).toMatchSnapshot();
});在上述代码中，我们使用 renderer 方法来将 ScrollView 组件呈现为纯 JavaScript 对象，方法返回的是一个树结构，其中包含了我们传递给 ScrollView 组件的所有属性和子节点。（类似于 React DOM 中的 Virtual DOM）
toMatchSnapshot() 允许我们将当前测试结果与上次结果进行比较，如果当前结果与上次结果不同，则测试失败。因此，这个小小的调用可以帮助我们检查组件是否呈现以及其完整性。
测试 ScrollView 组件滚动页数
ScrollView 组件允许用户滚动最大高度的一段内容。要测试 ScrollView 组件的滚动页数，我们需要计算 ScrollView 的实际像素高度。
为了使测试更容易，我们将使用 enzyme 中的 Mount 方法来创建 ScrollView 组件的虚拟 DOM。通过 getDOMNode() 方法获得 ScrollView 元素的引用对象。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------
------ - ----- - ---- ---------
------ ------- ---- --------------------------
-- --- ----- ------ -------
------------------ -------- --- --------- ---
------------- ------- -- -- -
----- ----------- - ------
------------
--------------
--------------
--------------
--------------
--------------
--------------
--------------
--------------
--------------
---------------
-------------
---------------
----- ------ - ------------------------ - --
--------------------- - -------
---------------------------- - -------------------
---在这个测试用例中，我们创建了一个 ScrollView 组件，并向它添加了一些元素。我们通过 mount() 方法将 ScrollView 组件呈现为一个虚拟 DOM，然后使用 getDOMNode() 方法获得 ScrollView 元素的引用对象。
然后，我们计算了 ScrollView 的实际像素高度，并将其分为两半。我们将 scrollTop 设置为高度的一半，然后检查测试结果是否等于 1。
结论
在本文中，我们讨论了如何在 Jest 中测试 React Native 的 ScrollView 组件。使用 react-test-renderer 和 enzyme，我们可以测试 ScrollView 组件是否正常工作，并检查它们的滚动页数是否正确。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67472544555db9718d049441