JestJS单元测试：如何测试Mutation失败时的组件状态值

没问题，我来一步步教你写这个单元测试，核心就是要模拟Apollo mutation调用失败的情况，然后验证组件的状态和行为是否符合预期。

第一步：准备模拟依赖 #

首先，我们需要模拟组件props里的upload mutation函数，让它直接返回一个被拒绝的Promise，这样就能触发我们要测试的失败分支；同时还要模拟console.error，方便后续验证错误日志是否正常输出：

// 模拟upload mutation，调用后直接返回rejected的Promise
const mockUpload = jest.fn(() => Promise.reject(new Error('上传失败')));
// 模拟console.error，避免测试时真的输出错误日志，同时便于验证调用情况
const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

第二步：挂载组件并获取实例 #

假设你的组件叫UploadComponent，我们用Enzyme（也可以用React Testing Library，这里以Enzyme为例）挂载组件，传入模拟好的upload props，然后拿到组件实例：

import { shallow } from 'enzyme';
import UploadComponent from './UploadComponent';

test('当upload mutation失败时，isProcessing状态应重置为false', async () => {
  const wrapper = shallow(<UploadComponent upload={mockUpload} />);
  const componentInstance = wrapper.instance();
  // 生成一个测试用的文件对象
  const testFile = new File(['测试内容'], 'test-file.txt', { type: 'text/plain' });

第三步：触发example函数并验证状态变化 #

调用组件实例的example方法，然后分两步验证状态：

1. 调用后立即验证isProcessing被设为true
2. 等待异步的catch逻辑执行后，验证isProcessing被重置为false

// 触发example方法
  componentInstance.example({ file: testFile });

  // 第一步：验证调用mutation前状态已切换为处理中
  expect(componentInstance.state.isProcessing).toBe(true);

  // 等待异步的catch逻辑执行（Promise的reject是异步任务，需要等待事件循环）
  await Promise.resolve();

  // 第二步：验证失败后状态被重置为未处理
  expect(componentInstance.state.isProcessing).toBe(false);

第四步：验证其他预期行为 #

别忘了验证mutation是否被正确调用，以及错误日志是否被输出：

// 验证upload mutation被传入正确的参数调用
  expect(mockUpload).toHaveBeenCalledWith({ variables: { file: testFile } });
  // 验证console.error确实输出了错误信息
  expect(consoleErrorSpy).toHaveBeenCalledWith(expect.any(Error));
});

最后：清理模拟 #

测试结束后记得恢复被模拟的console.error，避免影响其他测试用例：

afterAll(() => {
  consoleErrorSpy.mockRestore();
});

这样一套测试下来，就完整覆盖了mutation失败的场景：状态正确切换、mutation正确调用、错误日志正常输出。

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