如何使用 Enzyme 测试使用 React Lazy 和 Suspense 包裹的组件-JavaScript中文网-JavaScript教程资源分享门户

引言

React 中的 Lazy 和 Suspense 是新引入的特性。这些特性旨在提高组件性能，以及优化组件加载更好的用户体验。然而，Lazy 和 Suspense 的引入也带来了组件测试的新挑战。

Enzyme 是 React 的强大测试工具，可以使组件测试变得更加容易。但是，用 Enzyme 测试使用 Lazy 和 Suspense 包裹的组件比普通组件测试更具挑战性。这篇文章将演示如何使用 Enzyme 测试使用 Lazy 和 Suspense 包裹的组件，并提供一些技巧和实用指导。

配置

在开始之前，我们需要安装 Enzyme 并配置 Enzyme 以与 React 一起使用。

npm install --save-dev enzyme enzyme-adapter-react-16

在最近一次更新之前，Enzyme 仅支持 React 原生组件的测试。但是，10.0.0 版本修复了这个问题，并添加了对 React.lazy 和 <suspense>组件的支持。

import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Enzyme from 'enzyme';

Enzyme.configure({ adapter: new Adapter() });

如何测试组件

测试使用 Lazy 和 Suspense 包裹的组件与测试其他 React 组件并无二异。测试分类可以分为三个主要部分：

1.准备

在这个阶段，我们需要导入 Lazy 包装过的组件和 Suspense 组件。

import { lazy, Suspense } from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

import MyComponent from './MyComponent';

2.行动

它非常类似于一般的 React 组件测试。我们只需挂载懒加载的组件。

describe('MyComponent', () => {
  it('should render component', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Suspense).exists()).toBe(true);
    expect(wrapper.find(LazyComponent).exists()).toBe(true);
  });
});

3.断言

我们可以像测试其他 React 组件一样对组件的属性、状态、方法进行测试。下面是一个例子。

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

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

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

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

极端情况

在极端情况下，当 Lazy 组件中的 Suspense 组件未正常渲染时，测试结果可能无法得出，而无法执行测试用例。

这个问题的解决方法是等待 Suspense 组件渲染完成。在 Enzyme 中，使用 waitUntil，或自定义等待时间。

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

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

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

总结

测试用例作为前端开发生命周期的一部分，极大地提高了代码的可维护性和可预测性。当使用 React 的新特性时，测试变得更有挑战性。但是，Enzyme 使得这一过程变得更加容易。通过演示如何使用 Enzyme 测试使用 Lazy 和 Suspense 包裹的组件，我们希望为您的测试用例提供实用指导。

参考文献

https://jestjs.io/docs/tutorial-react-native#react-testing-library

https://enzymejs.github.io/enzyme/docs/guides/react-lazy-suspense.html

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