如何对React类组件中的非独立函数进行单元测试？

嘿，我太懂你这种两难的处境了——测试类里那些掺杂了副作用的非独立方法，简直是单元测试的噩梦：直接调用吧，会触发 setState、页面导航这些测试不需要的操作；重写逻辑吧，又怕以后业务代码改了测试跟不上，变成“假测试”。别慌，咱们一步步拆解问题，找到最优解。

问题核心：业务逻辑与副作用耦合 #

你的 valueCheck 和 proceedApiCheck 最大的问题是把纯业务判断逻辑和副作用操作（比如状态更新、页面跳转、API调用）混在了一起。要解决测试难题，第一步就是把它们拆开。

解决方案1：抽离纯业务逻辑函数 #

把那些只做判断、不碰副作用的逻辑，单独抽成纯函数——纯函数的特点是输入相同就输出相同，没有任何外部依赖，测试起来超简单，而且完全不用担心副作用干扰。

比如针对你的代码，我们可以抽出这几个纯函数：

// 单独抽离的纯业务逻辑，可独立测试
export const getTransferStatus = (value) => {
  if (value === 'abc') return true;
  if (value === '123') return false;
  return undefined; // 处理其他未知值的默认情况
};

export const isApiDataValid = (data) => {
  const invalidNames = ['fake adidas', 'fake nike'];
  return !invalidNames.includes(data.name);
};

export const getTargetScreenByCurrency = (currency) => {
  switch(currency){
    case 'EURO': return 'Euro';
    case 'Pound': return 'Pound';
    default: return 'Dollar';
  }
};

然后修改原组件类，让它调用这些纯函数，只负责处理副作用：

export class Screen1 extends React.Component {
  valueCheck = (value) => {
    const transfer = getTransferStatus(value);
    if (transfer !== undefined) {
      this.setState({ isNavigating:true, transfer });
      this.proceedApiCheck(value);
    }
  }

  proceedApiCheck = async(value) =>{
    let data;
    try{
      data = await FirstApi(value);
      this.setState(data);
    }catch(){
      this.navigateToScreen('Failure');
      return;
    }

    if (!isApiDataValid(data)) {
      this.navigateToScreen('Failure');
      return;
    }

    try{
      const result = await secondApi(data.price);
      const targetScreen = getTargetScreenByCurrency(result.currency);
      this.navigateToScreen(targetScreen);
    }catch(){
      this.navigateToScreen('Failure');
      return;
    }
  }
}

这样一来，纯业务逻辑的测试就变得非常直接，比如：

import { getTransferStatus, isApiDataValid, getTargetScreenByCurrency } from './Screen1';

test('getTransferStatus returns true for "abc"', () => {
  expect(getTransferStatus('abc')).toBe(true);
});

test('isApiDataValid rejects "fake adidas"', () => {
  expect(isApiDataValid({ name: 'fake adidas' })).toBe(false);
});

test('getTargetScreenByCurrency maps "EURO" to "Euro"', () => {
  expect(getTargetScreenByCurrency('EURO')).toBe('Euro');
});

解决方案2：Mock 副作用操作，测试类方法的行为 #

对于剩下的类方法（valueCheck 和 proceedApiCheck），我们不需要重写逻辑，而是用测试框架（比如 Jest）模拟掉所有副作用，只验证它们是否正确调用了纯函数和副作用方法。

举个例子，测试 valueCheck 的逻辑：

import { Screen1 } from './Screen1';

describe('Screen1.valueCheck', () => {
  let screenInstance;
  beforeEach(() => {
    // 创建组件实例，mock掉所有副作用方法
    screenInstance = new Screen1();
    screenInstance.setState = jest.fn();
    screenInstance.proceedApiCheck = jest.fn();
  });

  test('triggers correct state and API check when value is "abc"', () => {
    screenInstance.valueCheck('abc');
    // 验证setState是否传入了正确参数
    expect(screenInstance.setState).toHaveBeenCalledWith({ isNavigating: true, transfer: true });
    // 验证是否调用了proceedApiCheck
    expect(screenInstance.proceedApiCheck).toHaveBeenCalledWith('abc');
  });

  test('triggers correct state and API check when value is "123"', () => {
    screenInstance.valueCheck('123');
    expect(screenInstance.setState).toHaveBeenCalledWith({ isNavigating: true, transfer: false });
    expect(screenInstance.proceedApiCheck).toHaveBeenCalledWith('123');
  });
});

再比如测试 proceedApiCheck 的各种分支场景：

import { Screen1 } from './Screen1';
import { FirstApi, secondApi } from './api';

// 提前mock API调用
jest.mock('./api', () => ({
  FirstApi: jest.fn(),
  secondApi: jest.fn(),
}));

describe('Screen1.proceedApiCheck', () => {
  let screenInstance;
  beforeEach(() => {
    screenInstance = new Screen1();
    screenInstance.setState = jest.fn();
    screenInstance.navigateToScreen = jest.fn();
  });

  test('navigates to Failure when FirstApi fails', async () => {
    // 模拟API抛出错误
    FirstApi.mockRejectedValue(new Error('API error'));
    await screenInstance.proceedApiCheck('abc');
    // 验证是否导航到失败页
    expect(screenInstance.navigateToScreen).toHaveBeenCalledWith('Failure');
    // 验证setState没被调用
    expect(screenInstance.setState).not.toHaveBeenCalled();
  });

  test('navigates to Failure when data has invalid name', async () => {
    // 模拟API返回无效数据
    FirstApi.mockResolvedValue({ name: 'fake adidas', price: 99 });
    await screenInstance.proceedApiCheck('abc');
    // 验证先更新了状态，再导航到失败页
    expect(screenInstance.setState).toHaveBeenCalledWith({ name: 'fake adidas', price: 99 });
    expect(screenInstance.navigateToScreen).toHaveBeenCalledWith('Failure');
  });

  test('navigates to Euro screen when currency is EURO', async () => {
    // 模拟API返回有效数据，且第二个API返回EURO
    FirstApi.mockResolvedValue({ name: 'valid product', price: 99 });
    secondApi.mockResolvedValue({ currency: 'EURO' });
    await screenInstance.proceedApiCheck('abc');
    expect(screenInstance.navigateToScreen).toHaveBeenCalledWith('Euro');
  });
});

为什么这方案可行？ #

• 没有重复业务逻辑：所有核心判断都在纯函数里，测试和业务代码共享同一套逻辑，以后业务改了，只需要更新纯函数和对应的测试即可。
• 专注测试目标：类方法的测试只验证“是否做了正确的操作”，而不是“操作的具体逻辑”，避免了副作用的干扰。
• 维护成本低：纯函数的测试简单直接，类方法的测试只需要关注调用关系，不管内部逻辑怎么变，只要调用关系对，测试就通过。

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