使用 Enzyme 进行通用的 React 组件测试的细节-JavaScript中文网-JavaScript教程资源分享门户

React 组件在现代前端应用中扮演着非常重要的角色。它们负责展示和交互用户界面，提供了在开发过程中进行测试的重要机会。然而，在测试 React 组件时，很难模拟用户与组件之间的交互，这就需要 Enzyme 进行帮助。

Enzyme 是一个流行的 React 测试工具，它提供了一组 API 来执行包括快照测试、交互测试等在内的多种测试类型。在本文中，我们将详细讨论使用 Enzyme 进行通用的 React 组件测试的细节。

安装运行 Enzyme

在安装 enzyne 前，我们需要先安装 react 和 react-dom 。Enzyme 支持从 React 版本 14 开始，目前也支持 React 17 版本。

npm install --save-dev enzymne react-test-renderer react-dom

如果你使用的是 Create React App ，则无需单独安装 react-dom 和 react-test-renderer。

安装完毕后，我们需要创建一个配置文件 src/setupTests.js 并在其中导入 Enzyme 和相应的 React 适配器。

// src/setupTests.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

在配置文件中，我们使用 Enzyme.configure() 来设置使用的适配器。适配器代表 React 的不同版本，因此在使用之前需要进行适配器的配置。

Enzyme 目前提供三个适配器：

EnzymeAdapter 用于 React 的 16 版本之前。
React17Adapter 用于 React 的 17 版本。
React18Adapter 用于预览版的 React 18。

测试细节

渲染组件

在测试 React 组件之前，Enzyme 允许我们构建和渲染 React 组件。这是通过 Enzyme.mount() 方法来实现的。

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

it('renders without crashing', () => {
  mount(<MyComponent />);
});

这个测试仅仅是检验组件是否能够渲染，可以帮助避免常见的渲染错误。

查找组件

一旦组件被渲染，我们需要使用 find() 方法来查找特定的组件。 find() 方法根据选择器返回一个包含了组件实例的 Wrapper 对象。

const wrapper = mount(<MyComponent />);
const button = wrapper.find('button');

在上面的示例中，我们使用 wrapper.find() 方法查找文本内容为 "Click me" 的按钮。

另外还可以使用 find() 方法与 CSS 选择器或特定的组件类型一起使用：

//查找特定组件类型
const input = wrapper.find('input');
//查找带有指定 CSS 类名的组件
const submitButton = wrapper.find('.submitButton');

调用方法和模拟事件

Wrapper 对象不仅允许我们查找组件，还允许我们操作和交互组件。 simulate() 方法用于模拟事件的发生：

const wrapper = mount(<MyComponent />);
const button = wrapper.find('button');
button.simulate('click');

注意，事件名应该是小写的，例如 "click"，而不是 "Click"。

在模拟事件时，我们还可以传递一个事件对象，例如通过更改输入框的值：

const wrapper = mount(<MyComponent />);
const input = wrapper.find('input');
input.simulate('change', { target: { value: 'test' } });

在这个例子中，我们将输入框的值更改为 "test"，并通过 target 属性传递给事件对象。

获取和设置状态

React 组件通过状态来存储数据和状态。我们可以使用 state() 方法获取组件的状态，使用 setState() 方法来修改元素的状态。

const wrapper = mount(<MyComponent />);
expect(wrapper.state('isOpen')).toEqual(false);
wrapper.setState({ isOpen: true });
expect(wrapper.state('isOpen')).toEqual(true);

快照测试

快照测试是一种测试方法，它用于比较 React 组件的层次结构以及子组件之间的关系。在第一次运行测试时，快照被创建并保存在文件中，每次运行测试时，测试会比较旧的快照与新的组件层次结构是否相同。

Enzyme 提供了 Enzyme-to-json 来将对象转换为可序列化的 JSON 表示形式，使其具有可比性。

-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ------ ---- -----------------
------ ----------- ---- ---------------

----------------------- -- -- -
  ---------- ------ ----------- -- -- - 
    ----- ------- - ------------------ ----
    ------------------------------------------
  ---
---

在第一次运行此测试时，它将创建并保存一个快照文件。在任何时候，如果 MyComponent 的 UI 发起更改，我们都可以检查组件是否令人满意。

异步测试

React 组件通常会发起异步操作，例如从 API 加载数据，并在数据可用时更新 UI。我们可以使用 async/await 来处理这些异步操作并确保测试总是等待回调完成。

-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----------- ---- ---------------

----------------------- -- -- -
  ---------- ------ --------- ---- ------ ------ ----- -- -- - 
    ----- ------- - ------------------ ----
    
    -----------------------------------------------
    
    ----- ---------------
    
    ---------------------------------------------------
    
    -- -------- ---- ----- ---- ---------------
  ---
---

在这个测试中，我们使用了 await 关键字等待数据加载完成后，再继续进行其它的判断。

总结

在本文中，我们讨论了使用 Enzyme 进行通用的 React 组件测试的技术细节。Enzyme 提供了一组 API 来渲染、查找和交互 React 组件，并且可以与 Jest 等测试框架很好地配合使用。使用这些技术进行测试可以帮助我们在开发过程中确保代码质量和可靠性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649384b348841e989412d7d1