I want to test guard functions in Angular with jest, using Angular v19 and a with the experimental Zoneless setup. When i try to start my unittests for the guard functions, I get the "NullInjectorError: No provider for InjectionToken Application Configuration!".

SO far I tried mocking my app-config from the main.ts.

This is my testfile so far:

import { beforeEach, describe, expect, it, jest } from '@jest/globals';
import { provideMockStore } from '@ngrx/store/testing';
import { TestBed } from '@angular/core/testing';
import { setLanguage } from './index';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { TranslocoService } from '@jsverse/transloco';
import { provideHttpClient } from '@angular/common/http';

describe('setLanguage', () => {
  let activatedRouteSnapshotMock: ActivatedRouteSnapshot;
  let translocoServiceMock: jest.Mocked<TranslocoService>;

  const initialState = {
    setLanguage: jest.fn(),
    setInitialized: jest.fn(),
  };

  beforeEach(() => {
    translocoServiceMock = { setActiveLang: jest.fn(), load: jest.fn() } as any;
    TestBed.configureTestingModule({
      providers: [
        provideMockStore({ initialState }),
        {
          provide: Router,
          useValue: {
            navigate: jest.fn(),
          },
        },
        { provide: TranslocoService, useValue: translocoServiceMock },
        provideExperimentalZonelessChangeDetection(),
        provideHttpClient(),
      ],
    });

    activatedRouteSnapshotMock = {
      params: { lang: 'xy' },
    } as unknown as ActivatedRouteSnapshot;
  });
  it('should return true if the new language is already set', () => {
    activatedRouteSnapshotMock.params['lang'] = 'en';
    TestBed.runInInjectionContext(() => {
      expect(setLanguage(activatedRouteSnapshotMock)).toEqual(true);
    });
  });
});

I want to test guard functions in Angular with jest, using Angular v19 and a with the experimental Zoneless setup. When i try to start my unittests for the guard functions, I get the "NullInjectorError: No provider for InjectionToken Application Configuration!".

SO far I tried mocking my app-config from the main.ts.

This is my testfile so far:

import { beforeEach, describe, expect, it, jest } from '@jest/globals';
import { provideMockStore } from '@ngrx/store/testing';
import { TestBed } from '@angular/core/testing';
import { setLanguage } from './index';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { TranslocoService } from '@jsverse/transloco';
import { provideHttpClient } from '@angular/common/http';

describe('setLanguage', () => {
  let activatedRouteSnapshotMock: ActivatedRouteSnapshot;
  let translocoServiceMock: jest.Mocked<TranslocoService>;

  const initialState = {
    setLanguage: jest.fn(),
    setInitialized: jest.fn(),
  };

  beforeEach(() => {
    translocoServiceMock = { setActiveLang: jest.fn(), load: jest.fn() } as any;
    TestBed.configureTestingModule({
      providers: [
        provideMockStore({ initialState }),
        {
          provide: Router,
          useValue: {
            navigate: jest.fn(),
          },
        },
        { provide: TranslocoService, useValue: translocoServiceMock },
        provideExperimentalZonelessChangeDetection(),
        provideHttpClient(),
      ],
    });

    activatedRouteSnapshotMock = {
      params: { lang: 'xy' },
    } as unknown as ActivatedRouteSnapshot;
  });
  it('should return true if the new language is already set', () => {
    activatedRouteSnapshotMock.params['lang'] = 'en';
    TestBed.runInInjectionContext(() => {
      expect(setLanguage(activatedRouteSnapshotMock)).toEqual(true);
    });
  });
});

• angular
• unit-testing
• jestjs

• 1 please share the minimal reproducible code – Naren Murali Commented Mar 11 at 11:52

1 Answer 1

I fixed it by adding { provide: APP_CONFIG, useValue: {} }, to the providers for my test.