Skip to content

feat: add importOverrides as a variant of componentImports#578

Open
rpd10 wants to merge 1 commit into
testing-library:mainfrom
rpd10:rydiehl/import-overrides
Open

feat: add importOverrides as a variant of componentImports#578
rpd10 wants to merge 1 commit into
testing-library:mainfrom
rpd10:rydiehl/import-overrides

Conversation

@rpd10
Copy link
Copy Markdown

@rpd10 rpd10 commented May 14, 2026

Goal

Add an importOverrides option to RenderComponentOptions that allows authors to replace specific component imports without replacing the entire imports array. This complements the existing componentImports (full replacement) option.

Motivation

Test authors may want to mock 1-2 heavy child components without enumerating all imports. Today, there are 2 ways to accomplish this:

  1. Using componentImports requires listing every import (full replacement via { set: { imports } }). This is fine for components with few imports, but if you have many, it can be cumbersome and unintuitive.
  2. Using configureTestBed with raw TestBed.overrideComponent — leaks Angular internals into test code:
await render(MyComponent, {
  configureTestBed: (testBed) => {
    testBed.overrideComponent(MyComponent, {
      remove: { imports: [ChildComponent] },
      add: { imports: [StubChildComponent] },
    });
  },
});

Enhancement

This PR adds some sugar on top of the overrideComponent option to make it easier to override a subset of the component imports:

await render(MyComponent, {
  importOverrides: [
    { replace: ChildComponent, with: StubChildComponent }
  ]
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant