使用 Enzyme 进行 React 组件测试的十个最佳实践-JavaScript中文网-JavaScript教程资源分享门户

随着 React 技术的不断发展，前端开发人员越来越需要一种测试工具来确保他们的 React 应用不断迭代时的质量与稳定性。这就是为什么 Enzyme 能够成为 JavaScript 生态系统中最受欢迎的 React 组件测试库之一的原因所在。Enzyme 可以帮助开发人员轻松地测试他们的 React 组件，以确保代码质量、减少错误、提高代码维护性。在本篇文章中，我将分享 Enzyme 的十个最佳实践，这有助于帮助您更好地了解 Enzyme 并轻松应用于 React 组件测试中。

#1 创建可重用的测试辅助功能

为了能够在测试中更高效地使用 Enzyme，我们可以考虑将测试相关的辅助功能封装成单独的函数，以便它们可以在多个测试用例中进行重用。例如，假设您需要多次在测试用例中创建一个组件实例，您可以将此操作封装在一个帮助函数中：

import { mount } from 'enzyme';
export const mountComponent = (Component, props = {}) => {
  return mount(<Component {...props} />);
};

#2 使用 Jest + Enzyme 进行组件测试

Enzyme 在其自己的文档中首先推荐使用 Jest + Enzyme 进行 React 组件测试。 Jest 是一个流行的 JavaScript 测试框架，它能够轻松地协作地使用 Enzyme 以及其他测试工具:

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

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

#3 在测试之前将 React 依赖项替换为虚拟

每个 React 组件都依赖于一些其他组件或函数。在测试组件时，我们不想依赖于这些实际依赖项，因此我们可以使用 Jest 提供的 mock 函数将其替换为虚拟依赖项:

import ChildComponent from './ChildComponent';
jest.mock('./ChildComponent', () => 'div');

it('renders the child component', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.find(ChildComponent)).toHaveLength(1);
});

#4 使用 CSS 选择器定位元素

Enzyme 提供了很多方法来定位 DOM 元素，但是使用 CSS 选择器可以让你更加精确地选择元素:

it('renders a div with className="foo"', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper.find('div.foo')).toHaveLength(1);
});

#5 使用 Debug 方法在控制台中打印输出

Enzyme 提供了一个称为 debug() 的实用方法，用于在控制台中打印组件的 HTML：

it('logs the component', () => {
  const wrapper = mount(<MyComponent />);
  console.log(wrapper.debug());
});

#6 注意测试序列

在测试组件时，我们应该谨慎地选择测试序列，以尽可能涵盖和检查组件的所有功能和情况。在 Enzyme 中使用 describe() 和 it() 方法可以帮助我们更好地组织测试序列:

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

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

#7 避免测试内部实现

在编写测试时，我们应该专注于测试组件的公共 API，而不是具体实现细节，因为这些细节可能会发生变化。这样定义的测试用例将更加健壮，更不容易因为实现细节的变化而使测试失败。

#8 定义数学断言

测试组件时，我们必须保证其行为符合预期，这就是为什么实现适当的断言测试至关重要。在 Enzyme 和 Jest 中，我们可以使用 expect() 和其它数学断言来定义和验证这些期望:

expect(wrapper.find('button')).toHaveLength(1);
expect(wrapper.contains(<div className="foo" />)).toBe(true);
expect(wrapper.state('isOpen')).toEqual(true);

#9 测试组件的样式与交互方式

在进行 React 组件测试时，我们还应该考虑其样式和交互功能。例如，我们可以检查组件的 CSS 类是否合适，或者检查组件是否能够正确地处理状态变化以及用户交互。

it('shows the dropdown when the user clicks', () => {
  const wrapper = mount(<MyComponent />);
  const button = wrapper.find('button');
  button.simulate('click');
  expect(wrapper.find('.dropdown')).toHaveLength(1);
});

#10 使用 snapshots 定义组件结构

Enzyme 中的 toMatchSnapshot() 方法可以让我们轻松地创建组件快照，以便在更改组件代码后对其进行比较。这在检测意外的视觉变化时特别有用：

it('matches the snapshot', () => {
  const wrapper = mount(<MyComponent />);
  expect(wrapper).toMatchSnapshot();
});

结论

在本文中，我分享了 Enzyme 进行 React 组件测试的最佳实践，这将有助于您更加熟练地运用 Enzyme，确保 React 应用的代码质量、可维护性和稳定性。无论是开发新的 React 应用还是更新现有应用，您都可以考虑使用 Enzyme 进行测试，并结合本文中的最佳实践达到更好的结果。

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