如何测试含异步方法的React组件？高阶组件场景遇测试难题

一、原测试方式的合理性与优化方案 #

你的测试能跑通，但手动调用address.instance().fetchData()并不是最优实践，原因有两点：

1. 组件的constructor已经触发了一次fetchData，测试里再调用会发起重复请求，不符合组件真实的运行逻辑；
2. 这种方式相当于绕过了组件的生命周期，没有模拟用户真实看到的加载流程。

更优的测试写法 #

可以利用Jest的异步测试特性，等待组件的异步操作完成后再断言，这里提供两种方案：

方案1：使用waitFor（推荐，贴近真实用户行为）

如果项目引入了React Testing Library，这种方式更直观：

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import IpAddress from './IpAddress';

it('updates the text when an ip address has loaded', async () => {
  fetch.mockResponse('{ "ip": "some-ip" }');
  const { getByText } = render(<IpAddress />);
  
  // 初始状态应该显示Loading
  expect(getByText('Loading...')).toBeInTheDocument();
  
  // 等待异步操作完成，直到目标文本出现
  await waitFor(() => {
    expect(getByText('Pretty fly IP address you have there.')).toBeInTheDocument();
  });
});

方案2：基于Enzyme的优化写法

如果坚持用Enzyme，可以等待Promise微任务完成，避免手动调用实例方法：

import React from 'react';
import { mount } from 'enzyme';
import IpAddress from './IpAddress';

it('updates the text when an ip address has loaded', async () => {
  fetch.mockResponse('{ "ip": "some-ip" }');
  const address = mount(<IpAddress />);
  
  // 初始状态断言
  expect(address.text()).toEqual("Loading...");
  
  // 等待fetch和setState的异步操作完成
  await Promise.resolve();
  address.update();
  
  // 断言更新后的内容
  expect(address.text()).toEqual("Pretty fly IP address you have there.");
});

这里await Promise.resolve()会等待当前事件循环的微任务（包括fetch的Promise和setState的异步更新）完成，再调用address.update()让Enzyme重新渲染组件，完全模拟组件真实的加载流程。

二、react-window-dimensions HOC包装后的组件测试问题 #

当组件被HOC包装后，直接访问.instance()拿到的是HOC的实例，而不是你的IpAddress组件实例。你提到的IpAddress.wrappedComponent无效，大概率是导出方式的问题：

常见错误导出方式 #

如果你的组件是这样导出的：

// IpAddress.js
import withWindowDimensions from 'react-window-dimensions';

class IpAddress extends React.Component { /* ... */ }

export default withWindowDimensions(IpAddress);

此时你导入的IpAddress其实是HOC返回的组件，原始的IpAddress类并没有被导出，所以无法通过IpAddress.wrappedComponent访问。

解决方法 #

方法1：同时导出原始组件和包装后的组件

修改IpAddress.js的导出逻辑：

// IpAddress.js
import withWindowDimensions from 'react-window-dimensions';

// 导出原始组件，供测试使用
export class IpAddress extends React.Component { /* ... */ }

// 默认导出包装后的组件，供业务代码使用
export default withWindowDimensions(IpAddress);

这样在测试时，你可以直接导入原始组件进行测试（避开HOC的干扰）：

// 测试文件
import { IpAddress } from './IpAddress'; // 导入原始组件

it('updates the text when an ip address has loaded', async () => {
  fetch.mockResponse('{ "ip": "some-ip" }');
  const address = mount(<IpAddress />);
  
  await Promise.resolve();
  address.update();
  
  expect(address.text()).toEqual("Pretty fly IP address you have there.");
});

如果需要测试HOC包装后的组件，可以mock掉react-window-dimensions，让它直接返回原始组件：

// 测试文件
import React from 'react';
import { mount } from 'enzyme';
import IpAddress from './IpAddress'; // 导入包装后的组件

// mock HOC，直接返回传入的组件
jest.mock('react-window-dimensions', () => (Component) => Component);

it('updates the text when an ip address has loaded', async () => {
  fetch.mockResponse('{ "ip": "some-ip" }');
  const address = mount(<IpAddress />);
  
  await Promise.resolve();
  address.update();
  
  expect(address.text()).toEqual("Pretty fly IP address you have there.");
});

方法2：尝试获取HOC暴露的原始组件

如果react-window-dimensions确实会把原始组件挂载到wrappedComponent属性上，你可以尝试这样获取：

// 测试文件
import IpAddress from './IpAddress';

// 确认HOC是否暴露了wrappedComponent
const OriginalIpAddress = IpAddress.wrappedComponent;
if (OriginalIpAddress) {
  const address = mount(<OriginalIpAddress />);
  // 后续测试逻辑...
}

但这种方式依赖于HOC的实现，不如方法1可靠。

你遇到的错误原因 #

你看到的Invariant Violation错误，是因为IpAddress.wrappedComponent是undefined，你尝试渲染一个undefined的组件，所以React报错。这说明react-window-dimensions并没有给返回的组件添加wrappedComponent属性，因此方法1是更稳妥的解决方案。

内容的提问来源于stack exchange，提问作者Shane