Angular测试中注入DOCUMENT令牌失败问题求助

问题重现 #

将ClientValueExtractorService中注入Document的方式从自定义字符串令牌'Document'切换为Angular官方的DOCUMENT令牌后，测试时设置mockDocument的cookie值，调用getValues()无法获取到预期结果，测试失败。

解决步骤 #

1. 确认DOCUMENT的正确导入 #

确保服务和测试文件中，DOCUMENT都是从@angular/common导入的，这是最容易忽略的关键点：

// 服务和测试文件顶部都需添加该导入
import { DOCUMENT } from '@angular/common';

2. 修正mock对象的类型断言 #

原mock使用as Document的类型断言不够严谨，因为模拟对象仅包含cookie属性，与真实Document结构差异较大，会导致TypeScript类型处理出现隐性问题，改为as unknown as Document：

mockDocument = {
    cookie: '',
} as unknown as Document;

3. 修正测试断言的预期值 #

原测试中toStrictEqual()传入空值，而当cookie为'setting some cookie'时，split('; ')返回的是['setting some cookie']，需修正断言逻辑：

expect(service.getValues()).toStrictEqual(['setting some cookie']);

4. 验证TestBed配置的正确性 #

确保TestBed.configureTestingModule中的provider配置无重复，避免DOCUMENT被意外覆盖：

TestBed.configureTestingModule({
    providers: [
        ClientValueExtractorService,
        { provide: DOCUMENT, useValue: mockDocument },
    ],
});

修改后的完整测试代码 #

import { TestBed, getTestBed } from '@angular/core/testing';
import { DOCUMENT } from '@angular/common';
import { ClientValueExtractorService } from './client-value-extractor.service';

describe('ClientValueExtractorService', () => {
    let service: ClientValueExtractorService;
    let mockDocument: Document;

    beforeEach(() => {
        mockDocument = {
            cookie: '',
        } as unknown as Document;

        TestBed.configureTestingModule({
            providers: [
                ClientValueExtractorService,
                { provide: DOCUMENT, useValue: mockDocument },
            ],
        });

        service = getTestBed().inject(ClientValueExtractorService);
    });

    it('should give the clientValues', () => {
        mockDocument.cookie = 'setting some cookie';
        expect(service.getValues()).toStrictEqual(['setting some cookie']);
    });
});

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