在使用 Enzyme 测试 React 组件时如何模拟 React.lazy 和 React.Suspense？

前言

React 的 lazy 和 Suspense 是很常用的功能，可以帮助我们更好地实现按需加载和优化应用的性能。在编写 React 组件的测试代码时，我们也会经常遇到需要测试这些组件的情况，本文将介绍如何使用 Enzyme 模拟 lazy 和 Suspense。

Enzyme

Enzyme 是由 Airbnb 开源的一个用于 React 组件测试的工具，它提供了很多实用的 API，可以方便地模拟组件的行为并获取组件输出的信息。它的使用方式也很简单，可以通过 npm 安装：

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

然后在测试代码中引入并配置 Enzyme：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

这样我们就可以愉快地写测试代码了。

模拟 lazy 组件

lazy 组件是用于实现按需加载的功能的。当组件被调用时，它会异步加载后面跟着的组件，直到加载完成之前，页面会渲染一个 loading 动画或者占位符。在测试代码中，我们需要获取到被加载的组件并进行测试。

假设我们有一个 LazyComponent 组件，它使用了 lazy：

// www.javascriptcn.com code example
import React, { lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function LazyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

export default LazyComponent;

我们希望在测试中模拟 OtherComponent 的行为，这时我们需要使用 Enzyme 的 mount 方法来 mount 组件。

// www.javascriptcn.com code example
import React from 'react';
import { mount } from 'enzyme';

import LazyComponent from './LazyComponent';

describe('LazyComponent', () => {
  it('should render OtherComponent', async () => {
    const wrapper = mount(<LazyComponent />);

    // 等待被加载的组件完成渲染
    await new Promise(resolve => setTimeout(resolve, 0));

    const otherComponentWrapper = wrapper.find('OtherComponent');
    expect(otherComponentWrapper.exists()).toBe(true);
  });
});

这里我们使用了 Promise 来等待组件被加载完成。在真实环境中，Suspense 会在加载完成后自动将组件渲染出来，但在测试环境中，我们需要手动触发。

模拟 Suspense 组件

Suspense 是一个用于显示 loading 状态的组件，它可以包裹一个或多个 lazy 组件，等到所有组件加载完成后再渲染页面。在测试中，我们可以使用 setTimeout 来模拟组件加载的延迟。

假设我们有一个 SuspenseComponent 组件，它包裹了两个 lazy 组件：

// www.javascriptcn.com code example
import React, { lazy, Suspense } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));
const AnotherComponent = lazy(() => import('./AnotherComponent'));

function SuspenseComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
        <AnotherComponent />
      </Suspense>
    </div>
  );
}

export default SuspenseComponent;

我们希望在测试中模拟加载延迟，这时我们需要使用 Enzyme 的 mount 方法来 mount 组件，同时使用 setTimeout 来实现加载延迟。

// www.javascriptcn.com code example
import React from 'react';
import { mount } from 'enzyme';

import SuspenseComponent from './SuspenseComponent';

describe('SuspenseComponent', () => {
  it('should render lazy components', () => {
    const wrapper = mount(<SuspenseComponent />);

    setTimeout(() => {
      wrapper.update();

      const otherComponentWrapper = wrapper.find('OtherComponent');
      expect(otherComponentWrapper.exists()).toBe(true);

      const anotherComponentWrapper = wrapper.find('AnotherComponent');
      expect(anotherComponentWrapper.exists()).toBe(true);
    }, 200);
  });
});

在这个例子中，我们使用了 setTimeout 来延迟组件的加载。在真实环境中，lazy 和 Suspense 会根据实际情况来控制加载时间，这里我们只是为了演示如何写测试代码而手动控制了时间。

总结

Enzyme 是一个非常实用的 React 组件测试工具，它可以帮助我们方便地模拟组件的行为并获取组件输出的信息。在使用 lazy 和 Suspense 这两个功能时，需要特别注意它们的加载顺序和延迟时间，应该在测试代码中手动控制并等待加载完成后再进行断言。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/649e10b648841e9894aa22bf