How To Mock Services In Angular Using Jest

home.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { provideRouter } from '@angular/router';
import { homeRoutes } from '../../home.routes';
import { AuthService } from '@app/pages/auth/services/auth/auth.service';

describe('HomeComponent', () => {
	let component: HomeComponent;
	let fixture: ComponentFixture<HomeComponent>;
    // Create your authService
	let authService: AuthService;
    // Declare the type of all the methods you need to mock, over here we are doing just one
	let authServiceMock: { isLoggedIn: jest.Mock };

	beforeEach(async () => {
		// Create a mock object for AuthService with a mocked isLoggedIn method, remember the one we declared it's type on top
		authServiceMock = {
			isLoggedIn: jest.fn(), // jest.fn() creates a mock function for isLoggedIn
		};
		await TestBed.configureTestingModule({
			imports: [HomeComponent, HttpClientTestingModule],
			providers: [
				provideRouter(homeRoutes),
				// Provide the mock AuthService instead of the real one
				{ provide: AuthService, useValue: authServiceMock },
			],
		}).compileComponents();

		fixture = TestBed.createComponent(HomeComponent);
		component = fixture.componentInstance;
        // Inject the service into the TestBed
		authService = TestBed.inject(AuthService);
		fixture.detectChanges();
	});

	it('should create', () => {
		expect(component).toBeTruthy();
	});

	it('should have a falsy value for isLoggedIn', () => {
		// Mock the return value of isLoggedIn to be false
		authServiceMock.isLoggedIn.mockReturnValue(false);
		// Check if the mocked isLoggedIn method returns false
		expect(authService.isLoggedIn()).toStrictEqual(false);
	});
});