{"id":14006,"library":"shallow-render","title":"Shallow Rendering Utility for Angular","description":"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.","status":"active","version":"20.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/getsaf/shallow-render","tags":["javascript","Angular","Mock","Testing","TypeScript","typescript"],"install":[{"cmd":"npm install shallow-render","lang":"bash","label":"npm"},{"cmd":"yarn add shallow-render","lang":"bash","label":"yarn"},{"cmd":"pnpm add shallow-render","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Angular applications","package":"@angular/common","optional":false},{"reason":"Peer dependency for Angular applications","package":"@angular/compiler","optional":false},{"reason":"Peer dependency for Angular applications","package":"@angular/core","optional":false},{"reason":"Peer dependency for Angular applications, often used in components","package":"@angular/forms","optional":false},{"reason":"Peer dependency for Angular applications","package":"@angular/platform-browser","optional":false}],"imports":[{"note":"The primary class for shallow rendering. Used in TypeScript/ESM Angular environments; CommonJS require is not typical.","wrong":"const Shallow = require('shallow-render');","symbol":"Shallow","correct":"import { Shallow } from 'shallow-render';"},{"note":"Type for the options object passed to `shallow.render()`, useful for explicit type declarations in tests.","symbol":"ShallowRenderOptions","correct":"import { ShallowRenderOptions } from 'shallow-render';"},{"note":"Type for the object returned by `shallow.render()`, providing type safety for destructured properties like `find`, `element`, `outputs`, etc.","symbol":"ShallowRenderResult","correct":"import { ShallowRenderResult } from 'shallow-render';"}],"quickstart":{"code":"import { Shallow } from 'shallow-render';\nimport { ColorLinkComponent } from './color-link.component';\nimport { MyModule } from './my.module'; // Or declare component directly for standalone\n\ndescribe('ColorLinkComponent', () => {\n  let shallow: Shallow<ColorLinkComponent>;\n\n  beforeEach(() => {\n    // Initialize Shallow with the component to test and its containing NgModule or standalone declarations\n    shallow = new Shallow(ColorLinkComponent, MyModule);\n  });\n\n  it('renders a link with the name of the color', async () => {\n    // Render the component with specific inputs (bind)\n    const { find } = await shallow.render({ bind: { color: 'Blue' } });\n\n    // Assert the rendered content using a CSS selector\n    expect(find('a').nativeElement.textContent).toBe('Blue');\n  });\n\n  it('emits color when clicked', async () => {\n    // Render the component and capture element and outputs\n    const { element, outputs } = await shallow.render({ bind: { color: 'Red' } });\n    \n    // Simulate a click event on the component's root element\n    element.click();\n\n    // Assert that the specified output event was emitted with the correct value\n    expect(outputs.handleClick.emit).toHaveBeenCalledWith('Red');\n  });\n});","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Major 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.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Monitor the project's GitHub repository for updates on maintenance status. Consider contributing if stable long-term support is critical for your project.","message":"The `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.","severity":"gotcha","affected_versions":">=18.0.0"},{"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.","message":"Misunderstanding '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.","severity":"gotcha","affected_versions":">=6.0.0"}],"env_vars":null,"search_vec":"'20.0.0':47 'activ':110 'addit':112 'aim':30 'align':49 'allow':78 'angular':5,11,38,51,63,129,136 'api':76 'associ':36 'boilerpl':34 'capabl':28 'compat':68 'compon':20,85 'current':43,133 'declar':91 'deep':94 'depend':95 'design':14 'develop':79 'differenti':71 'easi':26 'ensur':67 'error':100 'focus':81 'futur':117 'general':55 'indic':114 'javascript':135 'key':70 'librari':54 'lockstep':61 'maintain':113,134 'mainten':106,121 'major':58,65 'mock':27,137 'model':122 'nativ':40 'need':89 'new':57,128 'often':35 'potenti':116 'project':108 'provid':22 'reduc':32 'releas':56,66 'remain':125 'render':2,8,24 'resort':97 'schema':101 'seek':111 'setup':104 'shallow':1,7,23 'shallow-rend':6 'shift':118 'simplifi':16,102 'specif':82 'stabl':44 'streamlin':75 'test':12,18,87,103,138 'testb':41 'though':123 'typescript':139,140 'unit':17 'updat':126 'util':3,13 'v20':52 'version':45,59,130 'without':88","created_at":"2026-04-20T01:57:26.593971+00:00","updated_at":"2026-04-20T01:57:26.593971+00:00","problems":[{"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.","cause":"A direct child component, directive, or pipe of the component under test is not properly declared, imported, or mocked within the `shallow-render` configuration.","error":"Error: NG0304: 'my-child-component' is not a known element"},{"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.","cause":"Mismatch between the `shallow-render` package version and the installed Angular peer dependency version. For example, installing `shallow-render@18` with Angular `v20`.","error":"Module not found: Error: Can't resolve '@angular/core' in '.../node_modules/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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'emit')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://shallow-render.com","github":"https://github.com/getsaf/shallow-render","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/shallow-render","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}