简介
React 是一种 JavaScript 库，用于构建用户界面。Enzyme 是 React 应用程序的 JavaScript 测试实用程序库，可以帮助我们进行代码测试、验证和调试。本文将介绍如何在 React 应用程序中使用 Enzyme 进行 GUI 测试，以便更好地理解和掌握此工具的使用。
安装 Enzyme
首先，我们需要安装 Enzyme。打开终端并运行下列命令：
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
这些命令将 Enzyme 和 React 适配器以及 React 渲染器添加到我们的应用程序中。
使用 Enzyme 进行 GUI 测试
对于 GUI 测试，我们可以使用 mount() API，对 React 组件进行挂载并渲染到 DOM 中，使我们可以进行交互并检查其正确性。
假设我们有一个简单的组件，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --------- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--------- --
--
-
------------ - ----- -- -
-----------------------
------------------------- ------------
--
----------------- - ----- -- -
---------------
------ ------------------
---
--
-------------------- - ----- -- -
---------------
--------- ------------------
---
--
-------- -
------ -
----- -----------------------------
-------
------
------ ----------- ------------------------ --------------------------------- --
--------
--- --
-------
---------
------ ----------- --------------------------- ------------------------------------ --
--------
--- --
------- -----------------------------
-------
--
-
-
------ ------- ----------这是一个带有表单的登录组件，我们可以使用 Enzyme 来测试其正确性。
要在测试文件中使用 Enzyme，我们需要首先导入它：
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import LoginForm from './LoginForm';
configure({ adapter: new Adapter() });现在我们可以开始编写测试了。创建一个名为 LoginForm.test.js 的文件，并将以下代码添加到该文件中：
describe('<LoginForm />', () => {
it('should trigger `handleSubmit` when the submit button is clicked', () => {
const handleSubmitMock = jest.fn();
const wrapper = mount(<LoginForm onSubmit={handleSubmitMock} />);
wrapper.find('button[type="submit"]').simulate('click');
expect(handleSubmitMock).toHaveBeenCalled();
});
});在该测试用例中，我们创建了一个假的 handleSubmit() 方法，并将其传递给 LoginForm 组件的 props。然后我们通过 mount() API 进行渲染，并模拟了按钮的点击事件。最后，我们检查 handleSubmitMock 是否被调用。
我们还可以使用 Enzyme 的其他 API 来检查组件内部的元素，例如：
it('should update `email` state when the email input is changed', () => {
const wrapper = mount(<LoginForm />);
const emailInput = wrapper.find('input').get(0);
emailInput.props.onChange({ target: { value: 'test@test.com' } });
expect(wrapper.state('email')).toEqual('test@test.com');
});上述代码表示，我们找到了 LoginForm 组件中的第一个 input 元素，并在其上调用 onChange() 方法来更改 email 值。然后我们检查状态是否已更改。
当我们使用 mount() API 进行 GUI 测试时，需要注意一些重要的原则：
避免对真实 DOM 进行任何操作（例如点击或输入等），而是使用 Enzyme API 来模拟它们。
避免在同一测试用例中制作太多断言，以便更有效地诊断问题。
结论
在本文中，我们了解了如何在 React 应用程序中使用 Enzyme 进行 GUI 测试。我们了解了如何安装 Enzyme 和使用它来渲染组件、检查组件的状态和模拟 DOM 事件。通过这些示例，我们建立了一个完整的测试套件，它可以帮助我们验证我们代码的正确性并捕获错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bca67d657e1f70dbe916b