Angular单元测试中如何Mock UUID以通过测试用例？

问题分析 #

你遇到的核心问题是：直接导入的uuid模块函数无法被常规spy正确拦截，导致测试时生成的随机UUID无法匹配预设的固定值。下面针对Angular常用的两种测试框架（Jasmine/Karma、Jest）给出具体解决方案。

方案1：Jasmine/Karma（Angular默认测试框架） #

假设你的Test类中使用的是uuid()（默认导出的v4函数），修改测试用例如下：

import * as uuid from 'uuid';
import { Test } from './test.component'; // 替换为你的Test类实际路径

describe("test this", () => {
    it("should create data for post", async () => {
        // 1. 初始化测试数据和组件实例
        const raw_data = [
            { name: "name-1", mobile:"******" },
            { name: "name-2", mobile:"******" }
        ];
        const expectedData = [
            { name: "name-1", mobile: "******", id:"0000-0000-0001" },
            { name: "name-2", mobile: "******", id: "0000-0000-0002" }
        ];
        const component = new Test(raw_data); // 假设Test类通过构造函数传入raw_data

        // 2. Mock uuid函数，依次返回预设的两个ID
        const uuidSpy = spyOn(uuid, 'default').and.returnValues(
            "0000-0000-0001", 
            "0000-0000-0002"
        );

        // 3. 执行测试逻辑
        component.createData();
        expect(component.data_to_post).toEqual(expectedData);

        // 可选：验证uuid被调用了两次
        expect(uuidSpy).toHaveBeenCalledTimes(2);
    })
})

如果你的代码中使用的是uuid.v4()（更规范的命名导出写法），只需要修改spy的目标：

const uuidSpy = spyOn(uuid, 'v4').and.returnValues("0000-0000-0001", "0000-0000-0002");

方案2：Jest测试框架 #

使用Jest的jest.mock直接mock整个uuid模块，示例如下：

// 顶部mock uuid模块
jest.mock('uuid', () => ({
    __esModule: true,
    default: jest.fn() // 如果用v4则改为v4: jest.fn()
}));

import * as uuid from 'uuid';
import { Test } from './test.component';

describe("test this", () => {
    it("should create data for post", async () => {
        const raw_data = [
            { name: "name-1", mobile:"******" },
            { name: "name-2", mobile:"******" }
        ];
        const expectedData = [
            { name: "name-1", mobile: "******", id:"0000-0000-0001" },
            { name: "name-2", mobile: "******", id: "0000-0000-0002" }
        ];
        const component = new Test(raw_data);

        // 预设mock函数的返回序列
        (uuid.default as jest.Mock).mockReturnValueOnce("0000-0000-0001")
                                   .mockReturnValueOnce("0000-0000-0002");

        component.createData();
        expect(component.data_to_post).toEqual(expectedData);
    })
})

关键注意点 #

1. 确认uuid调用方式：先检查你的业务代码中是用uuid()还是uuid.v4()，两者对应的mock目标不同。
2. 修正业务代码的小问题：你的Test类中raw_data应该是类的属性，需要通过构造函数传入或初始化，否则会报未定义错误（参考下面的修正版）：

import * as uuid from "uuid"

export class Test{
    raw_data: any[];
    data_to_post: any[] = [];

    constructor(raw_data: any[]) {
        this.raw_data = raw_data;
    }

    createData() {
        for (let item of this.raw_data) {
            this.data_to_post.push({
                ...item,
                id: uuid() // 或uuid.v4()
            })
        }
    }
}

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