angular/components · error
This TestElement was not created by the…
Error message
This TestElement was not created by the TestbedHarnessEnvironment
What it means
TestbedHarnessEnvironment.getNativeElement only unwraps UnitTestElement instances it created itself. Passing a TestElement produced by a different environment (e.g. TestbedHarnessEnvironment from another module injector or a non-testbed environment) fails the instanceof check. The library throws instead of returning a wrong/undefined DOM node.
Solutions
- Only pass TestElement instances obtained from the same TestbedHarnessEnvironment (harness.host or environment-level APIs)
- Use harness.host() and await it to get the environment-created TestElement instead of constructing elements manually
- Ensure a single copy of @angular/cdk is installed/bundled (check for duplicate @angular/cdk versions in node_modules)
- Use (el as any).element only if you are certain the element is a UnitTestElement, with a guard
Example fix
// before const el = someOtherEnv.getTestElement(nativeEl); const dom = TestbedHarnessEnvironment.getNativeElement(el); // throws // after const harness = await loader.getHarness(MyCompHarness); const testEl = await harness.host(); const dom = TestbedHarnessEnvironment.getNativeElement(testEl); // ok
Defensive patterns
Strategy: type-guard
Validate before calling
import { UnitTestElement } from '@angular/cdk/testing/testbed';
if (!(el instanceof UnitTestElement)) {
throw new Error('Pass a TestElement created by TestbedHarnessEnvironment');
} Type guard
import { UnitTestElement } from '@angular/cdk/testing/testbed';
import { TestElement } from '@angular/cdk/testing';
function isUnitTestElement(el: TestElement): el is UnitTestElement {
return el instanceof UnitTestElement;
} Try / catch
try {
const native = TestbedHarnessEnvironment.getNativeElement(el);
} catch (e) {
if ((e as Error).message.includes('not created by the TestbedHarnessEnvironment')) {
throw new Error('Obtain the element from the same harness environment');
}
throw e;
} Prevention
- Always get TestElements via harness.host() from the same environment
- Avoid mixing CDK testing environments in one test bundle
- Check for duplicate @angular/cdk copies in node_modules
- Never construct TestElement implementations by hand for getNativeElement
When it happens
Trigger: Calling TestbedHarnessEnvironment.getNativeElement(el) where el was created by another harness environment implementation (e.g. Selenium/Playwright environment, or a UnitTestElement from a different Angular testing module instance).
Common situations: Mixing harness environments across test bundles; sharing TestElement instances between Karma testbed tests and e2e-style environments; multiple copies of @angular/cdk/testing bundled in one app causing instanceof to fail across realms.
Related errors
- This TestElement was not created by the…
- This TestElement was not created by the…
- Attempting to clear an invalid element
- CDK Component harness query must contain at least one…
- Could not find ZoneJS. For test harnesses running in…
AI-assisted analysis of angular/components@0411926e7d (2026-08-31).
Data as JSON: /api/errors/66756635a296f4b4.
Report an issue: GitHub.
Appendix: source
Thrown at src/cdk/testing/testbed/testbed-harness-environment.ts:144
}
/**
* Creates a `HarnessLoader` at the document root. This can be used if harnesses are
* located outside of a fixture (e.g. overlays appended to the document body).
*/
static documentRootLoader(
fixture: ComponentFixture<unknown>,
options?: TestbedHarnessEnvironmentOptions,
): HarnessLoader {
return new TestbedHarnessEnvironment(document.body, fixture, options);
}
/** Gets the native DOM element corresponding to the given TestElement. */
static getNativeElement(el: TestElement): Element {
if (el instanceof UnitTestElement) {
return el.element;
}
throw Error('This TestElement was not created by the TestbedHarnessEnvironment');
}
/**
* Creates an instance of the given harness type, using the fixture's root element as the
* harness's host element. This method should be used when creating a harness for the root element
* of a fixture, as components do not have the correct selector when they are created as the root
* of the fixture.
*/
static async harnessForFixture<T extends ComponentHarness>(
fixture: ComponentFixture<unknown>,
harnessType: ComponentHarnessConstructor<T>,
options?: TestbedHarnessEnvironmentOptions,
): Promise<T> {
const environment = new TestbedHarnessEnvironment(fixture.nativeElement, fixture, options);
await environment.forceStabilize();
return environment.createComponentHarness(harnessType, fixture.nativeElement);
}
View on GitHub (pinned to 0411926e7d)