Skip to content

feat: add importOverrides as a variant of componentImports#578

Open
rpd10 wants to merge 2 commits into
testing-library:mainfrom
rpd10:rydiehl/import-overrides
Open

feat: add importOverrides as a variant of componentImports#578
rpd10 wants to merge 2 commits 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 }
  ]
})

* ]
* })
*/
importOverrides?: ImportOverride[];
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @rpd10
Do you think this should be preferred over componentImports, and could componentImports be deprecated?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Tim - good question. To me, it feels like this matches TestBed's behavior for services that are providedIn: 'root'. If you do nothing, TestBed would inject the real service. You can choose to provide custom mocks/stubs for specific services as needed. If we were building this from the ground up, I would argue that this should be the default behavior.

That being said, I would worry about the migration path for existing consumers and whether it could be automated via ng update. I think the migration would be challenging.

So I think this becomes a question of whether you would want to expose both options and have users/agents reason about which one to use, versus potentially causing heartache during migration. Let me know what your thoughts are.

Copy link
Copy Markdown
Member

@timdeschryver timdeschryver May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're currently also investigating recreating ATL, and a part of this is removing old/deprecated API's.
importOverrides could be added there as well. With that in mind, I don't want to add a migration for it (because it's not that easy, as you've mentioned).

If you want, feel free to also include this change to https://github.com/testing-library/angular-testing-library/blob/main/projects/testing-library/zoneless/src/public_api.ts

We can add a @deprecated to componentImports to warn users, and guide them to the new importOverrides.

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.

2 participants