Angular测试：如何Mock导入的const常量？

你遇到的错误是因为const声明的导出变量默认不可配置，导致spyOnProperty无法修改它。以下是几种可行的解决方法：

方法一：使用Object.defineProperty重新定义变量 #

直接在测试的beforeEach中重新定义导入的environment变量，绕过不可配置的限制：

import * as envModule from '../environments/environment';
import { YourService } from './your.service';

describe('YourService', () => {
  let service: YourService;

  beforeEach(() => {
    // 重新定义environment变量，设置为可配置
    Object.defineProperty(envModule, 'environment', {
      value: {
        production: false,
        // 添加你需要的mock配置项
        apiUrl: 'http://mock-api.example.com'
      },
      configurable: true
    });

    TestBed.configureTestingModule({
      providers: [YourService]
    });
    service = TestBed.inject(YourService);
  });

  it('should use mock environment', () => {
    expect(service.someMethod()).toBe(...); // 验证mock是否生效
  });
});

方法二：创建测试专用的environment文件 #

在项目中新增测试环境配置文件，通过Angular的构建配置自动替换，无需修改测试代码：

1. 在src/environments/下创建environment.test.ts：

export const environment = {
  production: false,
  // 测试环境需要的配置，无需依赖window.mainConfig
  apiUrl: 'http://test-api.example.com'
};

2. 修改angular.json中的测试配置，添加文件替换规则：
   找到projects -> your-project -> architect -> test -> options，在fileReplacements数组中添加：

{
  "replace": "src/environments/environment.ts",
  "with": "src/environments/environment.test.ts"
}

这样运行ng test时，Angular会自动用测试环境文件替换原文件，无需处理window.mainConfig的问题。

方法三：调整原文件的导出方式（需修改业务代码） #

如果允许修改原environment.ts，可以将常量改为getter属性，让它可配置：

修改src/environments/environment.ts：

export const environment = {
  get config() {
    return {
      ...(window.mainConfig || {}),
      production: false
    };
  }
};

然后在业务代码中使用environment.config代替直接访问environment，测试时就可以用spyOnProperty修改：

import { environment } from '../environments/environment';

describe('YourService', () => {
  beforeEach(() => {
    spyOnProperty(environment, 'config', 'get').and.returnValue({
      production: false,
      apiUrl: 'http://mock-url'
    });
    // 其他测试配置
  });
});

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