From e97c706221adde3a4d6aa7b83159e8e197107ff2 Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sat, 3 Oct 2026 16:51:03 -0400
Subject: [PATCH] Wait with renderSettled in the renderComponent tests, not
 run()

The renderComponent tests wrapped each render, update and destroy in
`run(() => ...)`. The tests now call the API directly and wait with
`await renderSettled()`, as an application does.

- `renderComponent()` renders synchronously. The test helper asserts the
  HTML immediately after the call, with no wait.
- Each tracked update and each destroy is followed by
  `await renderSettled()`.
- `AbstractStrictTestCase` no longer uses `runTask` and `runDestroy`.
  Only this test file extends that class.

No test was added, removed or renamed.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../components/render-component-test.ts       | 352 +++++++++---------
 .../lib/test-cases/abstract.ts                |  15 +-
 2 files changed, 190 insertions(+), 177 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
index 479cafe6b6e..8a568397fb8 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/render-component-test.ts
@@ -8,7 +8,6 @@ import {
   defineSimpleModifier,
   moduleFor,
   type ClassicComponentShape,
-  runDestroy,
 } from 'internal-test-helpers';
 
 import { Input, Textarea } from '@ember/component';
@@ -20,9 +19,8 @@ import templateOnly from '@ember/component/template-only';
 import { array, concat, fn, get, hash, on } from '@glimmer/runtime';
 import GlimmerishComponent from '../../utils/glimmerish-component';
 
-import { run } from '@ember/runloop';
 import { destroy, associateDestroyableChild, registerDestructor } from '@glimmer/destroyable';
-import { renderComponent, type RenderResult } from '../../../lib/renderer';
+import { renderComponent, renderSettled, type RenderResult } from '../../../lib/renderer';
 import { trackedObject } from '@ember/reactive/collections';
 import { cached, tracked } from '@glimmer/tracking';
 import Service, { service } from '@ember/service';
@@ -46,35 +44,34 @@ class RenderComponentTestCase extends AbstractStrictTestCase {
     return document.querySelector('#qunit-fixture')!;
   }
 
-  assertChange({ change, expect }: { change: () => void; expect: string }) {
-    run(() => change());
+  async assertChange({ change, expect }: { change: () => void; expect: string }) {
+    change();
+    await renderSettled();
 
     assertHTML(expect);
 
-    this.assertStableRerender();
+    await this.assertStableRerender();
   }
 
-  renderComponent(
+  async renderComponent(
     component: object,
     options: { args?: Record<string, unknown>; expect: string } | { classic: ClassicComponentShape }
   ) {
     let { owner } = this;
 
-    run(() => {
-      const result = renderComponent(component, {
-        owner,
-        args: 'args' in options ? options.args : {},
-        env: { document: document, isInteractive: true, hasDOM: true },
-        into: this.element,
-      });
-      this.component = {
-        ...result,
-        rerender() {
-          // unused, but asserted against
-        },
-      };
-      registerDestructor(this, () => result.destroy());
+    const result = renderComponent(component, {
+      owner,
+      args: 'args' in options ? options.args : {},
+      env: { document: document, isInteractive: true, hasDOM: true },
+      into: this.element,
     });
+    this.component = {
+      ...result,
+      rerender() {
+        // unused, but asserted against
+      },
+    };
+    registerDestructor(this, () => result.destroy());
 
     if ('expect' in options) {
       assertHTML(options.expect);
@@ -82,62 +79,67 @@ class RenderComponentTestCase extends AbstractStrictTestCase {
       assertClassicComponentElement(options.classic);
     }
 
-    this.assertStableRerender();
+    await this.assertStableRerender();
   }
 }
 
 moduleFor(
   'Strict Mode - RenderComponentTestCase',
   class extends RenderComponentTestCase {
-    afterEach() {
+    async afterEach() {
       if (this.component) {
-        runDestroy(this);
+        destroy(this);
+        await renderSettled();
       }
     }
 
-    '@test destroy cleans up dom via destrying the test context'() {
+    async '@test destroy cleans up dom via destrying the test context'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('<Foo/>', { strictMode: true, scope: () => ({ Foo }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
 
-    '@test destroy of the owner cleans up dom via destrying the test context'() {
+    async '@test destroy of the owner cleans up dom via destrying the test context'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('<Foo/>', { strictMode: true, scope: () => ({ Foo }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
 
-      run(() => destroy(this.owner));
+      destroy(this.owner);
+      await renderSettled();
 
       assertHTML('');
     }
 
-    '@test captureRenderTree includes the rendered components'(assert: QUnit['assert']) {
+    async '@test captureRenderTree includes the rendered components'(assert: QUnit['assert']) {
       let HelloWorld = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('<HelloWorld/>', { strictMode: true, scope: () => ({ HelloWorld }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
 
       if (!ENV._DEBUG_RENDER_TREE) return;
 
       assert.deepEqual(renderTreeNames(this.owner), ['{ROOT}', 'HelloWorld']);
     }
 
-    '@test captureRenderTree includes components rendered with any owner'(assert: QUnit['assert']) {
+    async '@test captureRenderTree includes components rendered with any owner'(
+      assert: QUnit['assert']
+    ) {
       let Owned = setComponentTemplate(precompileTemplate('owned'), templateOnly());
       let Ownerless = setComponentTemplate(precompileTemplate('ownerless'), templateOnly());
       let OwnedRoot = setComponentTemplate(
@@ -153,10 +155,10 @@ moduleFor(
       let ownerlessElement = document.createElement('div');
       this.element.append(ownedElement, ownerlessElement);
 
-      let results = run(() => [
+      let results = [
         renderComponent(OwnedRoot, { owner: this.owner, into: ownedElement }),
         renderComponent(OwnerlessRoot, { into: ownerlessElement }),
-      ]);
+      ];
 
       assertHTML('<div>owned</div><div>ownerless</div>');
 
@@ -164,17 +166,17 @@ moduleFor(
         assert.deepEqual(renderTreeNames(this.owner), ['{ROOT}', 'Owned', '{ROOT}', 'Ownerless']);
       }
 
-      run(() => {
-        for (let result of results) {
-          result.destroy();
-        }
-      });
+      for (let result of results) {
+        result.destroy();
+      }
+      await renderSettled();
 
       if (ENV._DEBUG_RENDER_TREE) {
         assert.deepEqual(renderTreeNames(this.owner), [], 'destroyed renders are gone');
       }
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
     }
   }
 );
@@ -198,62 +200,59 @@ moduleFor(
       return document.querySelector('#qunit-fixture')!;
     }
 
-    '@test manually calling destroy cleans up the DOM'() {
+    async '@test manually calling destroy cleans up the DOM'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
 
       let owner = buildOwner({});
-      let manualDestroy: () => void;
 
-      run(() => {
-        let result = renderComponent(Foo, {
-          owner,
-          into: this.element,
-        });
-        manualDestroy = result.destroy;
-        this.component = {
-          ...result,
-          rerender() {
-            // unused, but asserted against
-          },
-        };
+      let result = renderComponent(Foo, {
+        owner,
+        into: this.element,
       });
+      this.component = {
+        ...result,
+        rerender() {
+          // unused, but asserted against
+        },
+      };
 
       assertHTML('Hello, world!');
-      this.assertStableRerender();
+      await this.assertStableRerender();
 
-      run(() => manualDestroy());
+      result.destroy();
+      await renderSettled();
 
       assertHTML('');
-      this.assertStableRerender();
+      await this.assertStableRerender();
 
-      run(() => destroy(owner));
+      destroy(owner);
+      await renderSettled();
     }
 
-    '@test destroying the owner cleans up the DOM'() {
+    async '@test destroying the owner cleans up the DOM'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
 
       let owner = buildOwner({});
 
-      run(() => {
-        let result = renderComponent(Foo, {
-          owner,
-          into: this.element,
-        });
-        this.component = {
-          ...result,
-          rerender() {
-            // unused, but asserted against
-          },
-        };
+      let result = renderComponent(Foo, {
+        owner,
+        into: this.element,
       });
+      this.component = {
+        ...result,
+        rerender() {
+          // unused, but asserted against
+        },
+      };
 
       assertHTML('Hello, world!');
-      this.assertStableRerender();
+      await this.assertStableRerender();
 
-      run(() => destroy(owner));
+      destroy(owner);
+      await renderSettled();
 
       assertHTML('');
-      this.assertStableRerender();
+      await this.assertStableRerender();
     }
   }
 );
@@ -261,75 +260,77 @@ moduleFor(
 moduleFor(
   'Strict Mode - renderComponent',
   class extends RenderComponentTestCase {
-    afterEach() {
+    async afterEach() {
       if (this.component) {
-        runDestroy(this);
+        destroy(this);
+        await renderSettled();
       }
     }
 
-    '@test destroy cleans up dom via destroying the owner'() {
+    async '@test destroy cleans up dom via destroying the owner'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('<Foo/>', { strictMode: true, scope: () => ({ Foo }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
 
-      run(() => destroy(this.owner));
+      destroy(this.owner);
+      await renderSettled();
 
       assertHTML('');
     }
 
-    '@test Can use a component in scope'() {
+    async '@test Can use a component in scope'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('<Foo/>', { strictMode: true, scope: () => ({ Foo }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use a custom helper in scope (in append position)'() {
+    async '@test Can use a custom helper in scope (in append position)'() {
       let foo = defineSimpleHelper(() => 'Hello, world!');
       let Root = setComponentTemplate(
         precompileTemplate('{{foo}}', { strictMode: true, scope: () => ({ foo }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use a custom modifier in scope'() {
+    async '@test Can use a custom modifier in scope'() {
       let foo = defineSimpleModifier((element) => (element.innerHTML = 'Hello, world!'));
       let Root = setComponentTemplate(
         precompileTemplate('<div {{foo}}></div>', { strictMode: true, scope: () => ({ foo }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
+      await this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
     }
 
-    '@test Can shadow keywords (runtime)'() {
+    async '@test Can shadow keywords (runtime)'() {
       let each = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Bar = template('{{#each}}{{/each}}', {
         scope: () => ({ each }),
       });
 
-      this.renderComponent(Bar, { expect: 'Hello, world!' });
+      await this.renderComponent(Bar, { expect: 'Hello, world!' });
     }
 
-    '@test Can shadow keywords (compile-time)'() {
+    async '@test Can shadow keywords (compile-time)'() {
       let each = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Bar = compileTimeTemplate('{{#each}}{{/each}}', {
         scope: () => ({ each }),
       });
 
-      this.renderComponent(Bar, { expect: 'Hello, world!' });
+      await this.renderComponent(Bar, { expect: 'Hello, world!' });
     }
 
-    '@test Can use constant values in ambiguous helper/component position'() {
+    async '@test Can use constant values in ambiguous helper/component position'() {
       let value = 'Hello, world!';
 
       let Root = setComponentTemplate(
@@ -337,19 +338,19 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use inline if and unless in strict mode templates'() {
+    async '@test Can use inline if and unless in strict mode templates'() {
       let Root = setComponentTemplate(
         precompileTemplate('{{if true "foo" "bar"}}{{unless true "foo" "bar"}}'),
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'foobar' });
+      await this.renderComponent(Root, { expect: 'foobar' });
     }
 
-    '@test multiple components have independent lifetimes'() {
+    async '@test multiple components have independent lifetimes'() {
       class State {
         @tracked showSecond = true;
       }
@@ -363,15 +364,15 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!Hello, world!' });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => (state.showSecond = false),
         expect: 'Hello, world!<!---->',
       });
     }
 
-    '@test Can use a dynamic component definition'() {
+    async '@test Can use a dynamic component definition'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('<this.Foo/>'),
@@ -380,10 +381,10 @@ moduleFor(
         }
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use a dynamic component definition (curly)'() {
+    async '@test Can use a dynamic component definition (curly)'() {
       let Foo = setComponentTemplate(precompileTemplate('Hello, world!'), templateOnly());
       let Root = setComponentTemplate(
         precompileTemplate('{{this.Foo}}'),
@@ -392,10 +393,10 @@ moduleFor(
         }
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use a dynamic helper definition'() {
+    async '@test Can use a dynamic helper definition'() {
       let foo = defineSimpleHelper(() => 'Hello, world!');
       let Root = setComponentTemplate(
         precompileTemplate('{{this.foo}}'),
@@ -404,10 +405,10 @@ moduleFor(
         }
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use a curried dynamic helper'() {
+    async '@test Can use a curried dynamic helper'() {
       let foo = defineSimpleHelper((value) => value);
       let Foo = setComponentTemplate(precompileTemplate('{{@value}}'), templateOnly());
       let Root = setComponentTemplate(
@@ -418,10 +419,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use a curried dynamic modifier'() {
+    async '@test Can use a curried dynamic modifier'() {
       let foo = defineSimpleModifier((element, [text]) => (element.innerHTML = text));
       let Foo = setComponentTemplate(precompileTemplate('<div {{@value}}></div>'), templateOnly());
       let Root = setComponentTemplate(
@@ -432,22 +433,22 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
+      await this.renderComponent(Root, { expect: '<div>Hello, world!</div>' });
     }
 
-    '@test when args are trackedObject, the rendered component response appropriately'() {
+    async '@test when args are trackedObject, the rendered component response appropriately'() {
       let args = trackedObject({ foo: 2 });
       let Root = setComponentTemplate(precompileTemplate('{{@foo}}'), templateOnly());
 
-      this.renderComponent(Root, { args, expect: '2' });
+      await this.renderComponent(Root, { args, expect: '2' });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => args.foo++,
         expect: '3',
       });
     }
 
-    '@skip when args are a custom tracked class, the rendered component response appropriately'() {
+    async '@skip when args are a custom tracked class, the rendered component response appropriately'() {
       class Args {
         @tracked foo = 2;
       }
@@ -455,15 +456,15 @@ moduleFor(
       let Root = setComponentTemplate(precompileTemplate('{{@foo}}'), templateOnly());
 
       // @ts-expect-error SAFETY: custom class is not currently supported as args, but would be nice to support?
-      this.renderComponent(Root, { args, expect: '2' });
+      await this.renderComponent(Root, { args, expect: '2' });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => args.foo++,
         expect: '3',
       });
     }
 
-    '@test a modifier can call renderComponent'() {
+    async '@test a modifier can call renderComponent'() {
       let render = defineSimpleModifier((element, [comp]) => {
         let result = renderComponent(comp, { into: element });
 
@@ -479,10 +480,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: '<div>hi there</div>' });
+      await this.renderComponent(Root, { expect: '<div>hi there</div>' });
     }
 
-    '@test can render in to a detached element'() {
+    async '@test can render in to a detached element'() {
       let Inner = setComponentTemplate(precompileTemplate('hello there'), templateOnly());
       let element = document.createElement('div');
       let attach: () => void;
@@ -503,9 +504,9 @@ moduleFor(
 
       let Root = setComponentTemplate(precompileTemplate(`{{this.attached}}`), _Root);
 
-      this.renderComponent(Root, { expect: '' });
+      await this.renderComponent(Root, { expect: '' });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => attach(),
         expect: `<div>hello there</div>`,
       });
@@ -515,7 +516,7 @@ moduleFor(
      * Test skipped because when an error occurs,
      * we mess up the cache used by renderComponent.
      */
-    '@skip can *not* render in to a TextNode'(assert: Assert) {
+    async '@skip can *not* render in to a TextNode'(assert: Assert) {
       let Inner = setComponentTemplate(precompileTemplate('hello there'), templateOnly());
       let element = document.createTextNode('');
 
@@ -539,11 +540,11 @@ moduleFor(
 
       let Root = setComponentTemplate(precompileTemplate(``), _Root);
 
-      this.renderComponent(Root, { expect: '<!---->' });
+      await this.renderComponent(Root, { expect: '<!---->' });
       assert.verifySteps(['throw']);
     }
 
-    '@test replaces existing contents within the target element'() {
+    async '@test replaces existing contents within the target element'() {
       let Inner = setComponentTemplate(precompileTemplate('hello there'), templateOnly());
       let element = document.createElement('div');
       element.innerHTML = 'general kenobi';
@@ -567,15 +568,15 @@ moduleFor(
         _Root
       );
 
-      this.renderComponent(Root, { expect: '<div>general kenobi</div>' });
+      await this.renderComponent(Root, { expect: '<div>general kenobi</div>' });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => render(),
         expect: `<div>hello there</div>`,
       });
     }
 
-    [`@test renderComponent is eager, so it tracks with its parent`](assert: Assert) {
+    async [`@test renderComponent is eager, so it tracks with its parent`](assert: Assert) {
       let step = (...x: unknown[]) => assert.step(x.join(':'));
 
       let Inner = setComponentTemplate(
@@ -616,10 +617,10 @@ moduleFor(
         _Root
       );
 
-      this.renderComponent(Root, { expect: '<div>2 <button>++</button></div>' });
+      await this.renderComponent(Root, { expect: '<div>2 <button>++</button></div>' });
       assert.verifySteps(['render:root', 'foo:2']);
 
-      this.assertChange({
+      await this.assertChange({
         change: () => {
           this.element.querySelector('button')?.click();
         },
@@ -641,14 +642,13 @@ moduleFor(
 
       assert.strictEqual(this.element.innerHTML, '<div>3 <button>++</button></div>');
 
-      run(() => {
-        destroy(this.owner);
-      });
+      destroy(this.owner);
+      await renderSettled();
 
       assert.strictEqual(this.element.innerHTML, '');
     }
 
-    '@test multiple renderComponents share reactivity'() {
+    async '@test multiple renderComponents share reactivity'() {
       let args = trackedObject({ foo: 2 });
 
       let InnerOne = setComponentTemplate(precompileTemplate('{{@foo}}'), templateOnly());
@@ -682,15 +682,17 @@ moduleFor(
         _Root
       );
 
-      this.renderComponent(Root, { expect: '<div data-one="">2</div><div data-two="">2</div>' });
+      await this.renderComponent(Root, {
+        expect: '<div data-one="">2</div><div data-two="">2</div>',
+      });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => args.foo++,
         expect: '<div data-one="">3</div><div data-two="">3</div>',
       });
     }
 
-    '@test multiple renderComponents share service injection'() {
+    async '@test multiple renderComponents share service injection'() {
       class State extends Service {
         @tracked foo = 2;
       }
@@ -734,17 +736,19 @@ moduleFor(
         _Root
       );
 
-      this.renderComponent(Root, { expect: '<div data-one="">2</div><div data-two="">2</div>' });
+      await this.renderComponent(Root, {
+        expect: '<div data-one="">2</div><div data-two="">2</div>',
+      });
 
       let x = this.owner.lookup('service:state') as State;
 
-      this.assertChange({
+      await this.assertChange({
         change: () => x.foo++,
         expect: '<div data-one="">3</div><div data-two="">3</div>',
       });
     }
 
-    '@test rendering multiple times to adjacent elements'() {
+    async '@test rendering multiple times to adjacent elements'() {
       let aHelper = (str: string) => str.toUpperCase();
       let Child = setComponentTemplate(
         precompileTemplate(`Hi: {{aHelper "there"}}`, {
@@ -777,18 +781,19 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         expect: [`<div id="a">a:Hi: THERE</div><br>`, `<div id="b">b:Hi: THERE</div>`, ``, ``].join(
           '\n'
         ),
       });
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
 
-    '@test multiple calls to render in to the same element appear as siblings'() {
+    async '@test multiple calls to render in to the same element appear as siblings'() {
       let aHelper = (str: string) => str.toUpperCase();
       let Child = setComponentTemplate(
         precompileTemplate(`Hi: {{aHelper "there"}}`, {
@@ -817,10 +822,11 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         expect: `<div id="a">a:Hi: THEREa:Hi: THERE</div><br>\n\n`,
       });
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
@@ -828,7 +834,7 @@ moduleFor(
     /**
      * NOTE: subsequent renders to the same element are prepended to the element's children
      */
-    '@test multiple calls to render in to the same element appear as siblings and can be updated'() {
+    async '@test multiple calls to render in to the same element appear as siblings and can be updated'() {
       let aHelper = (str: string) => str.toUpperCase();
       let dataA = trackedObject({ count: 1 });
       let dataB = trackedObject({ count: -1 });
@@ -871,7 +877,7 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         expect: [
           `<div id="a">`,
           `<output>b:Hi: THERE:-1</output>`,
@@ -882,7 +888,7 @@ moduleFor(
         ].join('\n'),
       });
 
-      this.assertChange({
+      await this.assertChange({
         change: () => dataA.count++,
         expect: [
           `<div id="a">`,
@@ -898,7 +904,7 @@ moduleFor(
        * ERROR in conflict with the NOTE on this test.
        * the elementns flip locations... which is kinda bonkers
        */
-      this.assertChange({
+      await this.assertChange({
         change: () => dataB.count--,
         expect: [
           `<div id="a">`,
@@ -910,7 +916,8 @@ moduleFor(
         ].join('\n'),
       });
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
@@ -952,7 +959,7 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         expect: [`<div id="a"></div><br>`, `<div id="b"></div>`, ``, ``].join('\n'),
       });
 
@@ -960,7 +967,8 @@ moduleFor(
 
       assertHTML([`<div id="a">a:Hi</div><br>`, `<div id="b">b:Hi</div>`, ``, ``].join('\n'));
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
@@ -970,7 +978,7 @@ moduleFor(
 moduleFor(
   'Strict Mode <-> Loose Mode - renderComponent',
   class extends RenderComponentTestCase {
-    '@test incidentally invoked loose-mode components can still resolve helpers'() {
+    async '@test incidentally invoked loose-mode components can still resolve helpers'() {
       this.owner.register('helper:a-helper', (str: string) => str.toUpperCase());
       let Loose = setComponentTemplate(
         precompileTemplate(`Hi: {{a-helper "there"}}`),
@@ -981,9 +989,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hi: THERE' });
+      await this.renderComponent(Root, { expect: 'Hi: THERE' });
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
@@ -999,7 +1008,7 @@ moduleFor(
       }, /but that value was not in scope: a-helper/);
     }
 
-    '@test rendering multiple times to adjacent elements'() {
+    async '@test rendering multiple times to adjacent elements'() {
       this.owner.register('helper:a-helper', (str: string) => str.toUpperCase());
       let Loose = setComponentTemplate(
         precompileTemplate(`Hi: {{a-helper "there"}}`),
@@ -1029,13 +1038,14 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         expect: [`<div id="a">a:Hi: THERE</div><br>`, `<div id="b">b:Hi: THERE</div>`, ``, ``].join(
           '\n'
         ),
       });
 
-      run(() => destroy(this));
+      destroy(this);
+      await renderSettled();
 
       assertHTML('');
     }
@@ -1045,13 +1055,13 @@ moduleFor(
 moduleFor(
   'Strict Mode - renderComponent - built ins',
   class extends RenderComponentTestCase {
-    '@test Can use Input'() {
+    async '@test Can use Input'() {
       let Root = setComponentTemplate(
         precompileTemplate('<Input/>', { strictMode: true, scope: () => ({ Input }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         classic: {
           tagName: 'input',
           attrs: {
@@ -1062,13 +1072,13 @@ moduleFor(
       });
     }
 
-    '@test Can use Textarea'() {
+    async '@test Can use Textarea'() {
       let Root = setComponentTemplate(
         precompileTemplate('<Textarea/>', { strictMode: true, scope: () => ({ Textarea }) }),
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         classic: {
           tagName: 'textarea',
           attrs: {
@@ -1078,7 +1088,7 @@ moduleFor(
       });
     }
 
-    '@test Can use hash'() {
+    async '@test Can use hash'() {
       let Root = setComponentTemplate(
         precompileTemplate(
           '{{#let (hash value="Hello, world!") as |hash|}}{{hash.value}}{{/let}}',
@@ -1087,10 +1097,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use array'() {
+    async '@test Can use array'() {
       let Root = setComponentTemplate(
         precompileTemplate('{{#each (array "Hello, world!") as |value|}}{{value}}{{/each}}', {
           strictMode: true,
@@ -1099,10 +1109,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use concat'() {
+    async '@test Can use concat'() {
       let Root = setComponentTemplate(
         precompileTemplate('{{(concat "Hello" ", " "world!")}}', {
           strictMode: true,
@@ -1111,10 +1121,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use get'() {
+    async '@test Can use get'() {
       let Root = setComponentTemplate(
         precompileTemplate(
           '{{#let (hash value="Hello, world!") as |hash|}}{{(get hash "value")}}{{/let}}',
@@ -1123,10 +1133,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: 'Hello, world!' });
+      await this.renderComponent(Root, { expect: 'Hello, world!' });
     }
 
-    '@test Can use on and fn'(assert: Assert) {
+    async '@test Can use on and fn'(assert: Assert) {
       let handleClick = (value: unknown) => {
         assert.step('handleClick');
         assert.equal(value, 123);
@@ -1140,7 +1150,7 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: '<button>Click</button>' });
+      await this.renderComponent(Root, { expect: '<button>Click</button>' });
 
       clickElement('button');
 
@@ -1159,7 +1169,7 @@ moduleFor(
     // both strict and resolution modes, and these things would be implicitly
     // covered elsewhere, but until then, these coverage are essential.
 
-    '@test Can use each-in'() {
+    async '@test Can use each-in'() {
       let obj = {
         foo: 'FOO',
         bar: 'BAR',
@@ -1173,10 +1183,10 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, { expect: '[foo:FOO][bar:BAR]' });
+      await this.renderComponent(Root, { expect: '[foo:FOO][bar:BAR]' });
     }
 
-    '@test Can use in-element'() {
+    async '@test Can use in-element'() {
       let getElement = (id: string) => document.getElementById(id);
 
       let Foo = setComponentTemplate(
@@ -1194,7 +1204,7 @@ moduleFor(
         templateOnly()
       );
 
-      this.renderComponent(Root, {
+      await this.renderComponent(Root, {
         expect: '[<div id="in-element-test">before</div>][<!---->after]',
       });
     }
diff --git a/packages/internal-test-helpers/lib/test-cases/abstract.ts b/packages/internal-test-helpers/lib/test-cases/abstract.ts
index e937761ef73..968b57934a2 100644
--- a/packages/internal-test-helpers/lib/test-cases/abstract.ts
+++ b/packages/internal-test-helpers/lib/test-cases/abstract.ts
@@ -5,10 +5,11 @@ import equalInnerHTML from '../equal-inner-html';
 import equalTokens from '../equal-tokens';
 import { assertInvariants, getElement, takeSnapshot } from '../element-helpers';
 import { equalsElement, regex, classes } from '../matchers';
-import { runDestroy, runLoopSettled, runTask } from '../run';
+import { runLoopSettled } from '../run';
 import { assert } from '@ember/debug';
 import { rerenderComponent } from '../component-helper';
-import { _resetRenderers } from '@ember/-internals/glimmer';
+import { _resetRenderers, renderSettled } from '@ember/-internals/glimmer';
+import { destroy } from '@glimmer/destroyable';
 
 const TextNode = window.Text;
 const HTMLElement = window.HTMLElement;
@@ -44,9 +45,10 @@ export abstract class AbstractStrictTestCase {
     this.assert = assert;
   }
 
-  afterEach() {
+  async afterEach() {
     try {
-      runDestroy(this);
+      destroy(this);
+      await renderSettled();
     } finally {
       _resetRenderers();
     }
@@ -56,9 +58,10 @@ export abstract class AbstractStrictTestCase {
     this.snapshot = takeSnapshot();
   }
 
-  assertStableRerender() {
+  async assertStableRerender() {
     this.takeSnapshot();
-    runTask(() => rerenderComponent());
+    rerenderComponent();
+    await renderSettled();
     this.assertInvariants();
   }