TestBed configuration in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Angular test setup?

Given the TestBed configuration and component below, what will be the text content of the

element after fixture.detectChanges()?

Angular

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-greet',
  template: `<p>{{ greeting }}</p>`
})
class GreetComponent {
  greeting = 'Hello, Angular!';
}

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [GreetComponent]
  });
});

const fixture = TestBed.createComponent(GreetComponent);
fixture.detectChanges();
const pElement = fixture.nativeElement.querySelector('p');
const text = pElement.textContent;

A "Hello, Angular!"

B "{{ greeting }}"

C "Hello, World!"

D ""

💡 Hint

Remember that fixture.detectChanges() triggers Angular's change detection to update the template bindings.

The component's greeting property is set to 'Hello, Angular!'. After fixture.detectChanges(), Angular updates the template, so the

element shows this text.

📝 Syntax

intermediate

Which TestBed configuration will cause a runtime error when creating the component?

Consider the following TestBed configurations. Which one will cause an error when calling TestBed.createComponent(MyComponent)?

Angular

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-my',
  template: `<div>Test</div>`
})
class MyComponent {}

// TestBed configurations:
// A: declarations: [MyComponent]
// B: imports: [MyComponent]
// C: providers: [MyComponent]
// D: declarations: []

A TestBed.configureTestingModule({ declarations: [] });

B TestBed.configureTestingModule({ imports: [MyComponent] });

C TestBed.configureTestingModule({ providers: [MyComponent] });

D TestBed.configureTestingModule({ declarations: [MyComponent] });

💡 Hint

Components must be declared in the declarations array to be created.

Option A does not declare MyComponent. So, TestBed.createComponent(MyComponent) throws an error because Angular doesn't know about this component in the testing module.

🔧 Debug

advanced

Why does this TestBed test fail to inject the service?

Given this TestBed setup, why does the test fail with 'No provider for DataService' error?

Angular

import { Injectable } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Injectable()
class DataService {
  getData() { return 'data'; }
}

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

const service = TestBed.inject(DataService);

A DataService must be imported from '@angular/common' to be injectable.

B DataService must be declared in declarations, not providers.

C DataService is not added to the providers array in TestBed configuration.

D TestBed.inject() can only inject components, not services.

💡 Hint

Services must be listed in providers to be injectable in tests.

The error occurs because DataService is not provided in the testing module's providers array. Angular cannot inject a service it doesn't know about.

❓ state_output

advanced

What is the value of 'count' after this TestBed test runs?

In this test, what will be the value of component.count after fixture.detectChanges()?

Angular

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Increment</button><p>{{ count }}</p>`
})
class CounterComponent {
  count = 0;
  increment() { this.count++; }
}

beforeEach(() => {
  TestBed.configureTestingModule({ declarations: [CounterComponent] });
});

const fixture = TestBed.createComponent(CounterComponent);
const component = fixture.componentInstance;
component.increment();
fixture.detectChanges();

A 0

B 1

C undefined

D NaN

💡 Hint

Calling the increment method increases count before change detection.

The increment() method is called once before fixture.detectChanges(), so count becomes 1.

🧠 Conceptual

expert

Which TestBed configuration correctly mocks a service dependency?

You have a component that depends on ApiService. You want to test the component with a mock service that returns fixed data. Which TestBed configuration correctly provides the mock?

Angular

class ApiService {
  fetch() { return 'real data'; }
}

class MockApiService {
  fetch() { return 'mock data'; }
}

TestBed.configureTestingModule({
  declarations: [MyComponent],
  // Which providers array is correct?
  providers: ???
});

A providers: [{ provide: MockApiService, useClass: ApiService }]

B providers: [{ provide: ApiService, useValue: ApiService }]

C providers: [ApiService, MockApiService]

D providers: [{ provide: ApiService, useClass: MockApiService }]

💡 Hint

Use the provide/useClass pattern to replace a service with a mock in tests.

Option D tells Angular to provide ApiService using the MockApiService class, effectively replacing the real service with the mock during testing.

Practice

1. What is the main purpose of Angular's TestBed in unit testing?

easy

A. To create a small Angular environment for testing components and services

B. To compile the entire Angular application for production

C. To replace Angular modules with plain JavaScript modules

D. To generate HTML templates automatically

Solution

1. Step 1: Understand TestBed's role

   TestBed sets up a lightweight Angular environment to test parts of your app without running the full app.

2. Step 2: Compare options

   Only To create a small Angular environment for testing components and services describes this testing environment purpose. Others describe unrelated tasks.

3. Final Answer:

   To create a small Angular environment for testing components and services -> Option A

4. Quick Check:

   TestBed purpose = create test environment [OK]

Hint: TestBed sets up Angular test environment, not full app build [OK]

Common Mistakes:

• Confusing TestBed with production build tools
• Thinking TestBed generates templates automatically
• Assuming TestBed replaces Angular modules

2. Which of the following is the correct way to declare a component in TestBed configuration?

easy

A. TestBed.configureTestingModule({ imports: [MyComponent] })

B. TestBed.configureTestingModule({ bootstrap: [MyComponent] })

C. TestBed.configureTestingModule({ providers: [MyComponent] })

D. TestBed.configureTestingModule({ declarations: [MyComponent] })

Solution

1. Step 1: Identify where components go in TestBed

   Components must be listed under declarations in the configuration.

2. Step 2: Check each option

   Only TestBed.configureTestingModule({ declarations: [MyComponent] }) uses declarations with the component. Others misuse imports, providers, or bootstrap.

3. Final Answer:

   TestBed.configureTestingModule({ declarations: [MyComponent] }) -> Option D

4. Quick Check:

   Components go in declarations [OK]

Hint: Components go in declarations, modules in imports, services in providers [OK]

Common Mistakes:

• Putting components inside imports or providers
• Using bootstrap in TestBed config (only for app modules)
• Forgetting to declare components causes errors

3. Given this TestBed setup, what will fixture.componentInstance.title output?

TestBed.configureTestingModule({
  declarations: [MyComponent]
}).compileComponents();

const fixture = TestBed.createComponent(MyComponent);
fixture.detectChanges();

// MyComponent code:
// title = 'Hello Test';

medium

A. null

B. 'Hello Test'

C. undefined

D. Error: Component not declared

Solution

1. Step 1: Confirm component declaration and compilation

   MyComponent is declared and compiled, so it can be created and used.

2. Step 2: Understand fixture and detectChanges

   Creating fixture and calling detectChanges initializes component and bindings, so title is set.

3. Final Answer:

   'Hello Test' -> Option B

4. Quick Check:

   Declared + compiled + detectChanges = property accessible [OK]

Hint: Declare and compile components before accessing properties [OK]

Common Mistakes:

• Forgetting to call compileComponents causes errors
• Not calling detectChanges leaves properties uninitialized
• Assuming properties are undefined without initialization

4. What is the error in this TestBed setup?

TestBed.configureTestingModule({
  declarations: [MyComponent]
});

const fixture = TestBed.createComponent(MyComponent);
fixture.detectChanges();

medium

A. detectChanges() should be called before createComponent()

B. MyComponent should be in imports, not declarations

C. Missing call to compileComponents() before createComponent()

D. No error, this setup is correct

Solution

1. Step 1: Check TestBed configuration steps

   When testing components with templates, compileComponents() must be called to compile templates asynchronously.

2. Step 2: Identify missing step

   The code misses compileComponents() before creating the component, which can cause errors.

3. Final Answer:

   Missing call to compileComponents() before createComponent() -> Option C

4. Quick Check:

   compileComponents() required before createComponent() [OK]

Hint: Always call compileComponents() before createComponent() for templates [OK]

Common Mistakes:

• Skipping compileComponents() causes template errors
• Putting components in imports instead of declarations
• Calling detectChanges() too early

5. You want to test a component that uses a service injected via constructor. Which TestBed configuration is correct to provide the service mock?

hard

A. TestBed.configureTestingModule({ declarations: [MyComponent], providers: [{ provide: MyService, useValue: mockService }] })

B. TestBed.configureTestingModule({ declarations: [MyComponent], imports: [MyService] })

C. TestBed.configureTestingModule({ declarations: [MyComponent], declarations: [MyService] })

D. TestBed.configureTestingModule({ providers: [MyComponent, MyService] })

Solution

1. Step 1: Understand service injection in TestBed

   Services are provided via providers array. To mock a service, use provide with useValue.

2. Step 2: Analyze options

   TestBed.configureTestingModule({ declarations: [MyComponent], providers: [{ provide: MyService, useValue: mockService }] }) correctly provides a mock service. TestBed.configureTestingModule({ declarations: [MyComponent], imports: [MyService] }) wrongly puts service in imports. TestBed.configureTestingModule({ declarations: [MyComponent], declarations: [MyService] }) wrongly declares service as component. TestBed.configureTestingModule({ providers: [MyComponent, MyService] }) wrongly provides component as service.

3. Final Answer:

   TestBed.configureTestingModule({ declarations: [MyComponent], providers: [{ provide: MyService, useValue: mockService }] }) -> Option A

4. Quick Check:

   Mock services go in providers with provide/useValue [OK]

Hint: Use providers with provide and useValue for service mocks [OK]

Common Mistakes:

• Putting services in imports or declarations
• Providing components instead of services
• Not mocking services causing real calls