Using and Mocking Angular Environments with Jest

#angular #typescript #jest

In production-grade Angular applications, API URLs and other environment-specific properties are typically configured through environment files located in the src/environments/ directory. These can be generated using the Angular CLI command:

ng generate environments

This creates the standard environment files:

environment.ts (production defaults)
environment.development.ts (development configuration)
You could add other environments like staging...

Secure Configuration Management

For security best practices:

Never commit sensitive URLs directly in environment files
Use CI/CD variables (GitLab, GitHub Actions, etc.) to inject values during build

Protect repository variables by marking them as:

Masked (hidden in logs)
Protected (only available on protected branches)

Update the files:
environment.ts

export const environment = {
    production: true,
    API_URL: '${API_URL}' // CI/CD variable - This will be replaced during build
};

environment.development.ts

export const environment = {
  production: false,
  API_URL: 'https://api.example.com/data' // Used only in development
};

Use the environment variables:
data-http.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataHttpService {
  http = inject(HttpClient);

  getData(): Observable<unknown> {
    return this.http.get<unknown>(environment.API_URL);
  }
}

Unit testing with environment mocks

You could add an environment global mock in setup-jest.ts:

...

jest.mock('./src/environments/environment', () => ({
  environment: {
    API_URL: 'https://api.example.com/data',
    production: false
  }
}));

Mocking environment variables in unit tests is strongly recommended to ensure isolation, consistency, and security while testing all scenarios.

data-http.service.spec.ts

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { DataHttpService } from './data-http.service';
import { environment } from '../environments/environment';


describe('DataHttpService', () => {
  let service: DataHttpService;
  let httpMock: HttpTestingController;
  const mockData = { id: 1, name: 'Test Data' };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [DataHttpService]
    });

    service = TestBed.inject(DataHttpService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify();  // Verify no outstanding requests
  });

  it('should use mock API_URL', () => {
    expect(environment.API_URL).toBe('https://api.example.com/data'); // Url defined in the setup-jest.ts file
  });

  describe('.getData', () => {
        it('should make GET request and return data', () => {
        service.getData().subscribe(data => {
          expect(data).toEqual(mockData);
        });

        const req = httpMock.expectOne(environment.API_URL);
        expect(req.request.method).toEqual('GET');
        req.flush(mockData);
      });
    });
});