Advanced Angular Testing: 10+ Real-World Mocking Scenarios That Actually Work

This content originally appeared on DEV Community and was authored by Rajat

Stop wrestling with Angular unit tests—master these advanced mocking patterns and test like a pro

Ever stared at a failing Angular test for hours, wondering why your perfectly good code won’t cooperate with Jest?

I’ve been there. You know your component works in the browser, but getting it to pass unit tests feels like solving a Rubik’s cube blindfolded. The truth is, Angular testing gets tricky fast once you move beyond basic components—especially when dealing with @Input/@Output, routing, interceptors, and complex dependency injection.

Here’s what you’ll master by the end of this article:

Mock @Input/@Output properties like a pro
Handle ViewChild/ViewChildren and ContentChild scenarios
Test routing, guards, and resolvers without headaches
Mock pipes, directives, and interceptors effectively
Clean up memory leaks and avoid test pollution
Use advanced Jest patterns for Angular-specific challenges

Ready to transform your testing game? Let’s dive in!

1. Mocking `@Input()` and `@Output()` Properties

This is where most developers trip up. You need to mock child components that receive inputs and emit outputs, but how do you actually trigger those interactions in tests?

Creating Mock Components

@Component({ 
  selector: 'app-child', 
  template: '' 
})
class MockChildComponent {
  @Input() data: any;
  @Input() config: { enabled: boolean };
  @Output() notify = new EventEmitter<string>();
  @Output() dataChange = new EventEmitter<any>();
}

Testing Input Properties

it('should pass data to child component', () => {
  component.childData = { id: 1, name: 'Test' };
  fixture.detectChanges();

  const childComponent = fixture.debugElement
    .query(By.directive(MockChildComponent))
    .componentInstance;

  expect(childComponent.data).toEqual({ id: 1, name: 'Test' });
});

Triggering Output Events

Here’s the magic—how to actually emit events from your mock child:

it('should handle child notification', () => {
  const handleNotificationSpy = jest.spyOn(component, 'handleNotification');

  const childComponent = fixture.debugElement
    .query(By.directive(MockChildComponent))
    .componentInstance;

  // This is how you trigger the @Output()
  childComponent.notify.emit('hello from child');

  expect(handleNotificationSpy).toHaveBeenCalledWith('hello from child');
});

Pro tip: Always use fixture.detectChanges() after setting inputs to trigger Angular’s change detection!

2. Mocking ViewChild and ViewChildren

Here’s something that confuses many developers: You don’t directly mock @ViewChild—instead, you control what it references through your mock components.

// In your component
@ViewChild('childRef') child: ChildComponent;
@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

Testing ViewChild Access

it('should access child component via ViewChild', () => {
  fixture.detectChanges(); // Important: triggers ViewChild queries

  const childComponent = fixture.debugElement
    .query(By.directive(MockChildComponent))
    .componentInstance;

  // Mock methods on the child
  childComponent.someMethod = jest.fn().mockReturnValue('mocked result');

  // Now test your component's interaction with the child
  component.callChildMethod();

  expect(childComponent.someMethod).toHaveBeenCalled();
});

Quick question: Have you ever wondered why your @ViewChild is undefined in tests? Drop a comment—I’d love to help debug!

3. Mocking Angular Routing, Guards & Resolvers

Routing tests can be a nightmare without proper mocks. Here’s how to tame them:

Router and ActivatedRoute Mocks

const routerMock = {
  navigate: jest.fn(),
  navigateByUrl: jest.fn(),
};

const activatedRouteMock = {
  snapshot: {
    paramMap: convertToParamMap({ id: '42' }),
    queryParamMap: convertToParamMap({ tab: 'details' }),
    data: { user: { name: 'John' } }
  },
  params: of({ id: '42' }),
  queryParams: of({ tab: 'details' })
};

// In your TestBed configuration
providers: [
  { provide: Router, useValue: routerMock },
  { provide: ActivatedRoute, useValue: activatedRouteMock },
]

Testing Navigation

it('should navigate to user details', () => {
  component.goToUserDetails(123);

  expect(routerMock.navigate).toHaveBeenCalledWith(['/user', 123]);
});

Mocking Route Guards

const mockGuard = {
  canActivate: jest.fn(() => true),
  canDeactivate: jest.fn(() => of(true))
};

// Test the guard in isolation
it('should allow access when user is authenticated', () => {
  const result = mockGuard.canActivate();
  expect(result).toBe(true);
});

4. Mocking Interceptors

HTTP interceptors need special attention. You can either mock them in TestBed or test them in isolation:

Testing Interceptor in Isolation

it('should add auth token to request', () => {
  const mockRequest = new HttpRequest('GET', '/api/users');
  const mockNext = { 
    handle: jest.fn(() => of(new HttpResponse({ status: 200 }))) 
  };

  interceptor.intercept(mockRequest, mockNext as any).subscribe();

  const modifiedRequest = mockNext.handle.mock.calls[0][0];
  expect(modifiedRequest.headers.get('Authorization')).toBe('Bearer token123');
});

Mocking in TestBed

const mockInterceptor = {
  intercept: jest.fn((req, next) => next.handle(req))
};

providers: [
  { 
    provide: HTTP_INTERCEPTORS, 
    useValue: mockInterceptor, 
    multi: true 
  }
]

5. Mocking Lifecycle Hooks

Sometimes you need to spy on or control lifecycle hooks:

Spying on Hooks

it('should call ngOnInit', () => {
  const ngOnInitSpy = jest.spyOn(component, 'ngOnInit');

  component.ngOnInit();

  expect(ngOnInitSpy).toHaveBeenCalled();
});

Manual Hook Triggering

it('should initialize data on ngOnInit', () => {
  component.ngOnInit();

  expect(component.data).toBeDefined();
  expect(component.isLoaded).toBe(true);
});

6. Mocking Dependency Injection Tokens

Custom injection tokens require special handling:

// Your injection token
export const API_CONFIG = new InjectionToken<ApiConfig>('api.config');

// In tests
providers: [
  { 
    provide: API_CONFIG, 
    useValue: { 
      baseUrl: 'http://test-api.com',
      timeout: 5000 
    } 
  },
]

Testing with Injected Tokens

it('should use injected API config', () => {
  const config = TestBed.inject(API_CONFIG);

  expect(service.apiUrl).toBe(config.baseUrl);
});

7. Mocking Directives & Pipes

Create lightweight mocks for custom directives and pipes:

Mock Directive

@Directive({ selector: '[appHighlight]' })
class MockHighlightDirective {
  @Input() appHighlight: string;
  @Input() highlightColor: string;
}

Mock Pipe

@Pipe({ name: 'truncate' })
class MockTruncatePipe implements PipeTransform {
  transform(value: string, length: number = 50): string {
    return value?.length > length ? value.substr(0, length) + '...' : value;
  }
}

Using Mocks in Tests

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      MyComponent,
      MockHighlightDirective,
      MockTruncatePipe
    ]
  });
});

8. Mocking Forms (Reactive & Template-driven)

Forms testing requires different approaches:

Reactive Forms

it('should validate required fields', () => {
  component.userForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('test@example.com', [
      Validators.required, 
      Validators.email
    ])
  });

  component.userForm.patchValue({ name: '' });

  expect(component.userForm.get('name')?.hasError('required')).toBe(true);
  expect(component.userForm.valid).toBe(false);
});

Template-driven Forms

it('should update model on input change', fakeAsync(() => {
  const input = fixture.nativeElement.querySelector('input[name="username"]');

  input.value = 'newuser';
  input.dispatchEvent(new Event('input'));

  tick();
  fixture.detectChanges();

  expect(component.model.username).toBe('newuser');
}));

What’s your preferred approach—reactive or template-driven forms? Let me know in the comments!

9. Memory Cleanup & Test Isolation

This is crucial for preventing test pollution:

Essential Cleanup

afterEach(() => {
  // Clear all mock calls and instances
  jest.clearAllMocks();
  jest.resetAllMocks();

  // Angular-specific cleanup
  fixture.destroy();

  // DOM cleanup for global changes
  document.body.innerHTML = '';
});

Advanced Cleanup Patterns

afterEach(() => {
  // Reset global variables
  (window as any).__test_data__ = undefined;

  // Clear timers
  jest.clearAllTimers();
  jest.useRealTimers();

  // Reset modules (if using dynamic imports)
  jest.resetModules();
});

10. Mocking DOM Methods and Events

Direct DOM manipulation testing:

Event Simulation

it('should handle button click', () => {
  const handleClickSpy = jest.spyOn(component, 'handleClick');
  const button = fixture.nativeElement.querySelector('.submit-btn');

  button.click();

  expect(handleClickSpy).toHaveBeenCalled();
});

Mocking DOM Methods

it('should focus input on error', () => {
  const input = fixture.nativeElement.querySelector('input');
  const focusSpy = jest.spyOn(input, 'focus').mockImplementation();

  component.showError();

  expect(focusSpy).toHaveBeenCalled();
});

Unit Testing Best Practices

Here are the testing patterns that have saved me countless hours:

Test Structure

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;
  let userService: jest.Mocked<UserService>;

  beforeEach(async () => {
    const userServiceMock = {
      getUser: jest.fn(),
      updateUser: jest.fn(),
      deleteUser: jest.fn()
    };

    await TestBed.configureTestingModule({
      declarations: [UserComponent],
      providers: [
        { provide: UserService, useValue: userServiceMock }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    userService = TestBed.inject(UserService) as jest.Mocked<UserService>;
  });

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

BONUS: Advanced Jest Patterns for Angular

Auto-mocking Services

jest.mock('./user.service'); // Automatically mocks all methods

// In your test
const mockUserService = UserService as jest.MockedClass<typeof UserService>;

Custom Matchers

expect.extend({
  toBeValidForm(received) {
    const pass = received.valid === true;
    return {
      message: () => `Expected form to be ${pass ? 'invalid' : 'valid'}`,
      pass,
    };
  },
});

// Usage
expect(component.userForm).toBeValidForm();

Snapshot Testing Components

it('should render correctly', () => {
  fixture.detectChanges();
  expect(fixture.nativeElement).toMatchSnapshot();
});

Key Takeaways

Mastering Angular testing isn’t about memorizing syntax—it’s about understanding the patterns. Here’s what we covered:

Component Communication: Mock @Input/@Output and trigger events programmatically
View Queries: Control @ViewChild through mock components, not direct mocking
Routing: Use mock objects for Router and ActivatedRoute with proper typing
Dependencies: Mock services, tokens, and interceptors at the TestBed level
Forms: Test both reactive and template-driven patterns with proper change detection
Cleanup: Always clean up to prevent test pollution and memory leaks

The secret sauce? Think like Angular thinks—understand the lifecycle, change detection, and dependency injection flow.

Your Action Plan

Ready to level up your Angular testing? Here’s what to do next:

Pick one pattern from this article and implement it in your current project
Refactor an existing test that’s been giving you trouble using these techniques
Set up proper cleanup in all your test files to prevent future headaches

Let’s Keep the Conversation Going!

What did you think? Which mocking pattern surprised you the most? Have you been struggling with a specific testing scenario that we didn’t cover? Drop your thoughts in the comments—I genuinely love hearing how other developers tackle these challenges!

Found this helpful? If this guide saved you some debugging time or helped you finally understand Angular testing patterns, hit that button so other developers can discover it too!

Want more tips like this? I share practical Angular insights, testing strategies, and real-world development tips every week. Follow me to stay updated, or better yet—what topic should I tackle next? Vote in the comments: