fix: auto cleanup after each test

Author: timdeschryver

projects/testing-library/src/lib/testing-library.ts

@@ -20,6 +20,8 @@ import { createSelectOptions, createType, tab } from './user-events';
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent {}
 
+const mountedContainers = new Set();
+
 export async function render<ComponentType>(
   component: Type<ComponentType>,
   renderOptions?: RenderComponentOptions<ComponentType>,
@@ -77,6 +79,7 @@ export async function render<SutType, WrapperType = SutType>(
   }
 
   await TestBed.compileComponents();
+  mountedContainers.add(fixture.nativeElement);
 
   let isAlive = true;
   fixture.componentRef.onDestroy(() => (isAlive = false));
@@ -236,3 +239,20 @@ function addAutoImports({ imports, routes }: Pick<RenderComponentOptions<any>, '
 
   return [...imports, ...animations(), ...routing()];
 }
+
+function cleanup() {
+  mountedContainers.forEach(cleanupAtContainer);
+}
+
+function cleanupAtContainer(container) {
+  if (container.parentNode === document.body) {
+    document.body.removeChild(container);
+  }
+  mountedContainers.delete(container);
+}
+
+if (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
+  afterEach(async () => {
+    cleanup();
+  });
+}

projects/testing-library/tests/issues/67.spec.ts

@@ -0,0 +1,29 @@
+// https://github.com/testing-library/angular-testing-library/issues/67
+import { Component } from '@angular/core';
+import { render } from '../../src/public_api';
+
+@Component({
+  template: `
+    <div>
+      <!-- if remove for="name" no error happens -->
+      <label for="name">
+        <input type="checkbox" id="name" data-testid="checkbox" />
+        TEST
+      </label>
+    </div>
+  `,
+})
+export class BugGetByLabelTextComponent {}
+
+it('first step to reproduce the bug: skip this test to avoid the error or remove the for attribute of label', async () => {
+  expect(await render(BugGetByLabelTextComponent)).toBeDefined();
+});
+
+it('second step: bug happens :`(', async () => {
+  const { getByLabelText, getByTestId } = await render(BugGetByLabelTextComponent);
+
+  const checkboxByTestId = getByTestId('checkbox');
+  const checkboxByLabelTest = getByLabelText('TEST');
+
+  expect(checkboxByTestId).toBe(checkboxByLabelTest);
+});