shallow-render

library20.0.0jsnpmunverified

shallow-render is an Angular testing utility designed to simplify unit testing of components by providing shallow rendering and easy mocking capabilities. It aims to reduce the boilerplate often associated with Angular's native TestBed. The current stable version is 20.0.0, which aligns with Angular v20. The library generally releases new major versions in lockstep with Angular's major releases, ensuring compatibility. Its key differentiator is a more streamlined API that allows developers to focus specifically on the component under test without needing to declare all its deep dependencies or resort to `NO_ERRORS_SCHEMA`, simplifying test setup and maintenance. The project is actively seeking additional maintainers, indicating a potential future shift in its maintenance model, though it remains updated with new Angular versions by the current maintainer.

testing

npm install shallow-render

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SHALLOW-RENDER

shallow-render

testingjavascriptv20.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Shallow

✓ import { Shallow } from 'shallow-render';

✗ const Shallow = require('shallow-render');

The primary class for shallow rendering. Used in TypeScript/ESM Angular environments; CommonJS require is not typical.

ShallowRenderOptions

✓ import { ShallowRenderOptions } from 'shallow-render';

Type for the options object passed to `shallow.render()`, useful for explicit type declarations in tests.

ShallowRenderResult

✓ import { ShallowRenderResult } from 'shallow-render';

Type for the object returned by `shallow.render()`, providing type safety for destructured properties like `find`, `element`, `outputs`, etc.

This example demonstrates how to set up `shallow-render` for an Angular component, render it with specific inputs, assert its rendered DOM content using selectors, and verify event outputs when a user interaction occurs.

import { Shallow } from 'shallow-render'; import { ColorLinkComponent } from './color-link.component'; import { MyModule } from './my.module'; // Or declare component directly for standalone describe('ColorLinkComponent', () => { let shallow: Shallow<ColorLinkComponent>; beforeEach(() => { // Initialize Shallow with the component to test and its containing NgModule or standalone declarations shallow = new Shallow(ColorLinkComponent, MyModule); }); it('renders a link with the name of the color', async () => { // Render the component with specific inputs (bind) const { find } = await shallow.render({ bind: { color: 'Blue' } }); // Assert the rendered content using a CSS selector expect(find('a').nativeElement.textContent).toBe('Blue'); }); it('emits color when clicked', async () => { // Render the component and capture element and outputs const { element, outputs } = await shallow.render({ bind: { color: 'Red' } }); // Simulate a click event on the component's root element element.click(); // Assert that the specified output event was emitted with the correct value expect(outputs.handleClick.emit).toHaveBeenCalledWith('Red'); }); });

Debug

Known issues

breakingMajor versions of `shallow-render` are tightly coupled with Angular major versions. Upgrading Angular often requires a corresponding upgrade of `shallow-render`, which may introduce breaking API changes.

fix

Consult the `shallow-render` release notes and the Angular version support table for compatibility. Upgrade `shallow-render` to the matching major version for your Angular project.

affects: >=8.0.0

gotchaThe `shallow-render` project is actively seeking additional maintainers. While currently maintained and updated for new Angular versions, future long-term support and feature development may become reliant on community contributions.

fix

Monitor the project's GitHub repository for updates on maintenance status. Consider contributing if stable long-term support is critical for your project.

affects: >=18.0.0

gotchaMisunderstanding 'shallow' rendering can lead to incomplete test coverage. `shallow-render` focuses on the component under test in isolation, mocking its dependencies. This means tests might not fully cover deeper integration issues or behaviors of its child components.

fix

Supplement shallow unit tests with integration tests using `TestBed` (without `NO_ERRORS_SCHEMA`) or end-to-end tests for critical user flows and complex component interactions.

affects: >=6.0.0

Errors

Common errors & fixes

Error: NG0304: 'my-child-component' is not a known element

A direct child component, directive, or pipe of the component under test is not properly declared, imported, or mocked within the `shallow-render` configuration.

fix

Ensure all direct dependencies of the component under test are either included in the NgModule provided to `Shallow`, explicitly mocked using `shallow.mock()` or `shallow.dontMock()`, or that the component itself is standalone and its imports are handled.

Module not found: Error: Can't resolve '@angular/core' in '.../node_modules/shallow-render'

Mismatch between the `shallow-render` package version and the installed Angular peer dependency version. For example, installing `shallow-render@18` with Angular `v20`.

fix

Ensure that your `shallow-render` version matches your Angular major version (e.g., `shallow-render@20` for `@angular/core@20.x`). Upgrade `shallow-render` using `npm install shallow-render@latest` or `ng update shallow-render` if available.

TypeError: Cannot read properties of undefined (reading 'emit')

Attempting to spy on or assert against the `emit` method of a component's `@Output` EventEmitter when it has not been properly mocked or instantiated during the shallow render.

fix

When asserting outputs, ensure you are accessing the correct output property from the `outputs` object returned by `shallow.render()` (e.g., `outputs.myOutput.emit`). `shallow-render` typically provides a mock `emit` automatically.

Upgrade

Version history

20.0.0latest on npm

Audit

Dependencies

@angular/commonrequiredPeer dependency for Angular applications

@angular/compilerrequiredPeer dependency for Angular applications

@angular/corerequiredPeer dependency for Angular applications

@angular/formsrequiredPeer dependency for Angular applications, often used in components

@angular/platform-browserrequiredPeer dependency for Angular applications

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/getsaf/shallow-render ↗

packagehttps://www.npmjs.com/package/shallow-render ↗

homepagehttps://shallow-render.com ↗