Angular Testing Library renders Angular components for DOM-centered unit tests. It shifts attention from prerendered component instances, CSS-selector queries, and manual change detection toward assertions about what the interface actually renders, reducing boilerplate in template-heavy tests. section 8.2.3 section 8.3.3
Install `@testing-library/angular` as a development dependency and add `@testing-library/jest-dom` to enable DOM matchers such as `toBeInTheDocument()`. The library’s `render()` function returns a render result while `screen` queries the rendered interface. section 8.2.3 section 8.3.3
Test a component input through its UI
Render `ProjectCardComponent` with its Angular imports, a mocked `ProjectService`, and `componentInputs: { projectId: 1 }`. Assert that `screen.getByText('Project 1')` is in the document. Then set `projectId` to 2 on the fixture, run change detection, and assert that `Project 2` appears. The test verifies the visible result of a service-backed input change rather than component internals. section 8.3.3 section 8.3.3
Listing 8.8 Testing component UI with the Angular Testing Library
import { RenderResult, render, screen } from '@testing-library/angular';
let component: RenderResult<ProjectCardComponent>;
#1
describe('ProjectCardComponent', () => {
beforeEach(async () => {
component = await render(ProjectCardComponent, {
imports: [
AsyncPipe,
NgIf,
RouterTestingModule,
MockDirective(NgOptimizedImage),
],
providers: [
MockProvider(ProjectService, {
getProject(id) {
return of(mockProjects.find((project) => project.id === id)!);
},
}),
],
componentInputs: { #2
projectId: 1,
},
});
});
it('should render the project name', () => {
expect(screen.getByText('Project 1')).toBeInTheDocument(); #3
});
});
This test combines `render`, Angular imports and providers, a mocked service method, a component input, and a `screen` assertion against visible project text. section 8.3.3
For components driven by signals, mock the service state and behavior, then check UI updates after simulated events. This keeps component tests centered on rendered outcomes while dependencies supply controlled signal values. section 8.3.5
