在 React Native 开发中，Modal 组件是一个常用的组件，它可以在当前页面上覆盖一个新的视图，用于展示一些弹窗、选项等。在开发中，我们需要对 Modal 组件进行测试，以保证它的功能正常。
Enzyme 是一个用于 React 组件测试的 JavaScript 工具库，它可以让我们方便的对 React 组件进行测试。在本文中，我们将介绍如何使用 Enzyme 测试 React Native 中的 Modal 组件。
安装 Enzyme
在开始测试之前，我们需要先安装 Enzyme。可以使用 npm 或者 yarn 进行安装。在终端中运行以下命令：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
创建测试文件
在项目中创建一个 Modal.test.js 文件，用于编写测试代码。在文件中引入 Modal 组件和 Enzyme：
import React from 'react';
import { shallow } from 'enzyme';
import Modal from './Modal';测试 Modal 是否正常渲染
在测试文件中，我们可以编写一个测试用例，测试 Modal 是否正常渲染。代码如下：
describe('Modal', () => {
it('should render', () => {
const wrapper = shallow(<Modal />);
expect(wrapper.exists()).toBe(true);
});
});这个测试用例使用 shallow 函数渲染 Modal 组件，并使用 exists 函数判断是否正常渲染。如果渲染正常，exists 函数会返回 true。
测试 Modal 是否正常显示
在测试文件中，我们可以编写一个测试用例，测试 Modal 是否正常显示。代码如下：
-- -------------------- ---- -------
----------------- -- -- -
---------- -- ------- ---- ------- ---- -- ------ -- -- -
----- ------- - -------------- -------------- ----
-------------------------------------------------------------------------- --------
---
---------- --- -- ------- ---- ------- ---- -- ------- -- -- -
----- ------- - -------------- --------------- ----
-------------------------------------------------------------------------- --------
---
---这个测试用例使用 shallow 函数渲染 Modal 组件，并传入 visible prop。在第一个测试用例中，visible prop 的值为 true，我们使用 find 函数查找 Modal 组件中的 View 组件，并判断它的 style 属性是否包含 display: flex。在第二个测试用例中，visible prop 的值为 false，我们判断 View 组件的 style 属性是否包含 display: none。
测试 Modal 是否正常关闭
在测试文件中，我们可以编写一个测试用例，测试 Modal 是否正常关闭。代码如下：
describe('Modal', () => {
it('should call onClose function when modal is closed', () => {
const onClose = jest.fn();
const wrapper = shallow(<Modal visible={true} onClose={onClose} />);
wrapper.find('TouchableOpacity').simulate('press');
expect(onClose).toHaveBeenCalled();
});
});这个测试用例使用 shallow 函数渲染 Modal 组件，并传入 visible prop 和 onClose prop。我们使用 find 函数查找 Modal 组件中的 TouchableOpacity 组件，并模拟它的 press 事件。当 Modal 关闭时，onClose 函数应该被调用。
总结
在本文中，我们介绍了如何使用 Enzyme 测试 React Native 中的 Modal 组件。我们学习了如何安装 Enzyme，如何编写测试用例，以及如何测试 Modal 组件的渲染、显示和关闭。测试是开发过程中不可或缺的一部分，它可以帮助我们发现问题并提高代码质量。希望本文可以对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f97578d10417a222549381