[failing test] @model should be stable when transitioning out of route

When transitioning between routes, the @model argument on a Glimmer
component becomes unstable during willDestroy - the model value changes
before the component is properly destroyed.

Requires @glimmer/component Vite alias to resolve in tests.

Based on PR emberjs#20959 by @Windvis.

Author: Windvis

packages/@ember/-internals/glimmer/tests/integration/application/rendering-test.js

@@ -6,6 +6,7 @@ import { service } from '@ember/service';
 import { Component } from '@ember/-internals/glimmer';
 import { tracked } from '@ember/-internals/metal';
 import { set } from '@ember/object';
+import GlimmerComponent from '@glimmer/component';
 import { backtrackingMessageFor } from '../../utils/debug-stack';
 import { runTask } from '../../../../../../internal-test-helpers/lib/run';
 import { template } from '@ember/template-compiler';
@@ -398,6 +399,98 @@ moduleFor(
         });
     }
 
+    async ['@test @model should be stable when transitioning out of the route']() {
+      let assert = this.assert;
+
+      this.router.map(function () {
+        this.route('a', function () {
+          this.route('b');
+          this.route('c');
+        });
+        this.route('d', function () {
+          this.route('e');
+        });
+        this.route('f');
+      });
+
+      this.addComponent('foo', {
+        ComponentClass: class extends GlimmerComponent {
+          willDestroy() {
+            assert.step(this.args.model);
+          }
+        },
+      });
+      this.add(
+        'route:a',
+        class extends Route {
+          model() {
+            return 'a';
+          }
+        }
+      );
+      this.add(
+        'route:a.b',
+        class extends Route {
+          model() {
+            return 'b';
+          }
+        }
+      );
+      this.addTemplate('a.b', '<Foo @model={{@model}} @controller={{this}} />');
+      this.add(
+        'route:a.c',
+        class extends Route {
+          model() {
+            return 'c';
+          }
+        }
+      );
+      this.add(
+        'route:d',
+        class extends Route {
+          model() {
+            return 'd';
+          }
+        }
+      );
+      this.add(
+        'route:d.e',
+        class extends Route {
+          model() {
+            return 'e';
+          }
+        }
+      );
+      this.add(
+        'route:f',
+        class extends Route {
+          model() {
+            return 'f';
+          }
+        }
+      );
+
+      await this.visit('/a/b');
+      await this.visit('/a');
+
+      await this.visit('/a/b');
+      await this.visit('/a/c');
+
+      await this.visit('/a/b');
+      await this.visit('/d');
+
+      await this.visit('/a/b');
+      await this.visit('/d/e');
+
+      await this.visit('/a/b');
+      await this.visit('/f');
+
+      this.assert.verifySteps(
+        ['b', 'b', 'b', 'b', 'b'],
+        'The @model property of the Foo component should be stable in the willDestroy hook'
+      );
+    }
+
     ['@test it should produce a stable DOM when the model changes']() {
       this.router.map(function () {
         this.route('color', { path: '/colors/:color' });

vite.config.mjs

@@ -46,6 +46,14 @@ export default defineConfig(({ mode }) => {
       viteResolverBug(),
       version(),
     ],
+    resolve: {
+      alias: {
+        '@glimmer/component': resolve(
+          dirname(fileURLToPath(import.meta.url)),
+          './packages/@glimmer/component/dist/index.js'
+        ),
+      },
+    },
     optimizeDeps: { noDiscovery: true, include: ['expect-type'] },
     publicDir: 'tests/public',
     build,