如何在 Enzyme 中测试被 React.lazy() 包裹的组件-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 是什么

Enzyme 是 React 的一个 JavaScript 测试工具，由 Airbnb 开源。它提供了一种简单的测试 React 组件渲染、交互和状态更改的方法。Enzyme 能够让我们轻松地模拟、操作和遍历 React 组件树，使得测试 React 组件变得简单而容易。

React.lazy()

React.lazy() 是 React 16.6 新增的 API，可以让开发者使用动态导入的方式去加载组件。React.lazy() 可以实现按需加载，避免项目初期就加载所有依赖的组件，提高页面加载速度和性能。

如何测试被 React.lazy() 包裹的组件

测试被 React.lazy() 包裹的组件并不像测试普通组件那样简单，需要做一些额外的工作。下面是一些步骤：

1. 引入 React.lazy() 组件

首先，需要引入被 React.lazy() 包裹的组件。这个过程需要使用 React 的 lazy 函数，并在其返回结果上调用 .then() 方法加载组件，例如：

const lazyApp = React.lazy(() => import('./App'));

2. 使用 `React.Suspense` 包裹组件

在测试时，需要使用 React.Suspense 包裹组件。React.Suspense 可以用来等待异步组件加载完成并在等待时显示一个 UI。例如：

const wrapper = shallow(
  <React.Suspense fallback={<div>Loading...</div>}>
    <lazyApp />
  </React.Suspense>
);

3. 测试异步组件的位置

在测试异步组件时，需要使用 timeout（超时时间） 参数确定测试组件的位置。模拟异步加载的时候，需要让测试代码等待一段时间，超出这个时间就会抛出一个错误。例如：

// Make sure that the component renders after it was loaded
setTimeout(() => {
  expect(wrapper.find(App).length).toEqual(1);
}, 1500); // timeout set to 1.5 seconds

4. 安装 `react-test-renderer`

react-test-renderer 是一个 React 渲染器，可以使我们在 Node.js 中测试 React 组件的渲染结果。我们需要在项目中安装该模块：

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

5. 测试异步组件的快照

最后，可以使用 react-test-renderer 的 .create() 方法去测试异步组件的快照。例如：

const tree = renderer.create(
  <React.Suspense fallback={<div>Loading...</div>}>
    <lazyApp />
  </React.Suspense>
);

expect(tree.toJSON()).toMatchSnapshot();

示例代码

下面是一个完整的测试被 React.lazy() 包裹的组件的示例代码：

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

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

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

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

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

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

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

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

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

总结

在测试被 React.lazy() 包裹的组件时，我们需要引入 React.lazy() 组件、使用 React.Suspense 包裹组件、测试异步组件的位置、安装 react-test-renderer 和测试异步组件的快照。这些步骤可以使我们测试被 React.lazy() 包裹的组件变得更加容易和简单。

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

如何在 Enzyme 中测试被 React.lazy() 包裹的组件