错误测试时组件代码Catch块未获取到值的问题解决

现有代码的核心问题 #

1. Service层错误处理不严谨：如果graphqlApi抛出非标准Error类型（如字符串、普通对象），直接throw error会导致组件层无法正确解析错误信息；同时抛出GraphQL错误时，未确保错误信息是可读取的字符串格式。
2. 组件层错误包装错误：使用throw new Error(error)会将已有的Error实例转换成字符串（如Error: [object Error]），丢失原始错误的message、堆栈等关键信息。
3. 测试模拟可能不到位：若未正确模拟graphqlApi的错误返回，错误无法被正确抛到组件的Catch块中。

修复步骤 #

1. 修正Service层错误处理

确保抛出的都是标准Error对象，保留完整错误信息：

export const fetchIdea = async (
    suggestIdeaInput: GetSuggestedIdeaParams,
    topLevelPageId: string
): Promise<SuggestedIdeaOutput> => {
    try {
        const ideaData = await graphqlApi(topLevelPageId, 'getSuggestedIdea', getSuggestedPrice, {
            suggestIdeaInput,
        });

        if (ideaData?.data.errors) {
            // 统一错误信息格式，避免非字符串类型导致解析失败
            const errorContent = ideaData.data.errors[0];
            const errorMsg = typeof errorContent === 'string' 
                ? errorContent 
                : JSON.stringify(errorContent);
            throw new Error(`GraphQL请求错误: ${errorMsg}`);
        }
        return ideaData?.data.data.suggestPrice;
    } catch (error) {
        // 将非Error类型的错误包装成标准Error
        if (!(error instanceof Error)) {
            throw new Error(`获取创意失败: ${String(error)}`);
        }
        // 保留原始Error实例，包含堆栈和详细信息
        throw error;
    }
};

2. 修正组件层错误处理

避免错误信息丢失，直接传递或合理包装原始错误：

const onFetchSuggestedIdea = async (
    suggestIdea: GetSuggestedIdea
): Promise<SuggestedIdeaOutput> => {
    try {
        // 注意：此处参数需匹配，当前代码参数是suggestIdea，调用用了suggestIdeaInput，需确认是否笔误
        return await fetchIdea(suggestIdeaInput, topLevelPageId);
    } catch (error) {
        // 精准打印错误信息
        if (error instanceof Error) {
            console.error('获取推荐创意出错:', error.message, '\n堆栈:', error.stack);
        } else {
            console.error('获取推荐创意出错:', error);
        }
        // 传递原始错误，或按需添加上下文后抛出
        if (!(error instanceof Error)) {
            throw new Error(`获取推荐创意失败: ${String(error)}`);
        }
        throw error;
    }
};

3. 测试时正确模拟错误场景

以Jest为例，确保错误能被正确触发：

// 测试文件中
import { graphqlApi } from './api-module';
import { fetchIdea } from './service-module';

jest.mock('./api-module', () => ({ graphqlApi: jest.fn() }));

test('组件能正确捕获错误', async () => {
    // 模拟API抛出错误
    (graphqlApi as jest.Mock).mockRejectedValue(new Error('模拟API请求失败'));
    
    // 或模拟返回带GraphQL错误的响应
    // (graphqlApi as jest.Mock).mockResolvedValue({
    //     data: { errors: ['模拟GraphQL错误'] }
    // });

    const mockInput = {} as GetSuggestedIdeaParams;
    const mockPageId = 'test-page-id';

    await expect(fetchIdea(mockInput, mockPageId)).rejects.toThrowError(expect.any(Error));
});

额外检查点 #

• 确认组件中suggestIdeaInput的定义：当前组件函数参数是suggestIdea，但调用fetchIdea时用了suggestIdeaInput，可能是笔误导致参数未定义，引发隐性错误。
• 确认topLevelPageId在组件中已正确初始化，不存在未定义的情况。

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