ember-vitest 0.0.1

package/.prettierrc.js

@@ -0,0 +1,3 @@
+export default {
+  plugins: ["prettier-plugin-ember-template-tag"],
+};

package/README.md

@@ -0,0 +1,148 @@
+# ember-vitest
+
+Ember<->Vitest integration
+
+- pause test execution for UI debugging purposes (and without pausing JS execution)
+- continue using familiar helpers as you would in qunit
+-
+
+## Install
+
+```
+npm add --save-dev ember-vitest vitest  @vitest/browser webdriverio
+```
+
+## Usage
+
+After [#setup](#setup), run:
+
+```bash
+pnpm vitest
+# or
+npm exec vitest
+```
+
+### Application Tests
+
+These tests are generally for when you visit specific pages and simulate user flows.
+
+```gjs
+// tests/application/sample-test.gjs
+import { describe, it, expect } from "vitest";
+import { applicationTest } from "ember-vitest";
+import { visit, pauseTest } from "@ember/test-helpers";
+
+import App from "./your/app/location";
+
+describe("Home", () => {
+  applicationTest.scoped({ app: ({}, use) => use(App) });
+
+  applicationTest("can visit the home screen", async ({ element }) => {
+    await visit("/");
+
+    expect(element.textContent).toBe("hello there");
+  });
+});
+```
+
+### Rendering Tests
+
+These sorts of tests are very versatile, as they enable you to test not just components, but reactivity, DOM, modifiers, and more!
+
+```gjs
+import { describe, it, expect } from "vitest";
+import { renderingTest } from "ember-vitest";
+import { find, click, render } from "@ember/test-helpers";
+
+import { Counter } from "#src/components/counter";
+
+describe("Counter", () => {
+  // Optional: only needed if your component needs access to application state
+  // renderingTest.scoped({ app: ({}, use) => use(App) });
+
+  renderingTest("can interact", async () => {
+    await render(<template><Counter /></template>);
+
+    expect(find("output").textContent).toBe("0");
+
+    await click("button");
+
+    expect(find("output").textContent).toBe("1");
+  });
+});
+```
+
+### Container Tests
+
+These tests are sort of like unit tests, but when you need your application owner present.
+
+```gjs
+import { describe, it, expect } from "vitest";
+import { test } from "ember-vitest";
+
+describe("Container test", () => {
+  test.scoped({ app: ({}, use) => use(App) });
+
+  test("can interact", async ({ context }) => {
+    let foo = context.owner.lookup("service:foo");
+
+    expect(foo.count).toBe(0);
+    foo.count++;
+    expect(foo.count).toBe(1);
+  });
+});
+```
+
+### Pausing Test Execution
+
+you may use `pauseTest` and `resumeTest` just as you would in qunit, but vitest does not allow changing the test timeout within a test, so when paused, you only have until your test timeout to debug.
+
+To get around this, you'll probably want to bump the testTimeout in the vite config to a few minutes.
+
+```js
+export default defineConfig({
+  test: {
+    testTimeout: 120_000_000, // ms
+    // ...
+});
+```
+
+## Setup
+
+In order to use ember-vitest, you must have a vite config with plugins configured for compiling ember, as well as telling `test.include` to include the gjs / gts files.:
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+
+import { ember, extensions } from "@embroider/vite";
+import { babel } from "@rollup/plugin-babel";
+
+export default defineConfig({
+  // Add this config
+  test: {
+    include: ["tests/**/*-test.{gjs,gts}"],
+    browser: {
+      provider: "webdriverio",
+      enabled: true,
+      // at least one instance is required
+      instances: [
+        { browser: "chrome" },
+        // { browser: 'firefox' },
+        // { browser: 'edge' },
+        // { browser: 'safari' },
+      ],
+    },
+  },
+  // Existing config:
+  plugins: [
+    ember(),
+    babel({
+      babelHelpers: "runtime",
+      extensions,
+    }),
+  ],
+});
+```
+
+Your actual vite config may vary.

package/babel.config.js

@@ -0,0 +1,37 @@
+import { buildMacros } from "@embroider/macros/babel";
+
+const macros = buildMacros();
+
+export default {
+  plugins: [
+    [
+      "babel-plugin-ember-template-compilation",
+      {
+        compilerPath: "ember-source/dist/ember-template-compiler.js",
+        enableLegacyModules: [],
+        transforms: [...macros.templateMacros],
+      },
+    ],
+    [
+      "module:decorator-transforms",
+      {
+        runtime: {
+          import: import.meta.resolve("decorator-transforms/runtime-esm"),
+        },
+      },
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        absoluteRuntime: import.meta.dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...macros.babelMacros,
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+};

package/ember-addon-main.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  name: "ember-vitest",
+};

package/index.js

@@ -0,0 +1,97 @@
+import { setApplication, resumeTest, pauseTest } from "@ember/test-helpers";
+
+// https://vitest.dev/guide/test-context.html#extend-test-context
+import { test as baseTest } from "vitest";
+import {
+  setupContext,
+  teardownContext,
+  setupRenderingContext,
+  setupApplicationContext,
+} from "@ember/test-helpers";
+
+import Application from "ember-strict-application-resolver";
+
+globalThis.resumeTest = resumeTest;
+
+class App extends Application {
+  modules = {};
+}
+
+const waitForSettled = true;
+const options = { waitForSettled };
+
+export const test = baseTest.extend({
+  app: ({}, use) => use(App),
+  element: ({}, use) => use(document.createElement("div")),
+  context: ({}, use) => use({}),
+  env: [
+    async ({ app, element, context }, use) => {
+      document.body.append(element);
+
+      setApplication(app.create({ autoboot: false, rootElement: element }));
+      await setupContext(context, options);
+
+      await use({
+        owner: context.owner,
+        element,
+        pauseTest,
+      });
+
+      await teardownContext(context, options);
+      element.remove();
+    },
+    { auto: true },
+  ],
+});
+
+export const renderingTest = baseTest.extend({
+  app: ({}, use) => use(App),
+  element: ({}, use) => use(document.createElement("div")),
+  context: ({}, use) => use({}),
+  env: [
+    async ({ app, element, context }, use) => {
+      document.body.append(element);
+
+      setApplication(app.create({ autoboot: false, rootElement: element }));
+      await setupContext(context, options);
+      await setupRenderingContext(context, options);
+
+      await use({
+        owner: context.owner,
+        element,
+        pauseTest,
+      });
+
+      await teardownContext(context, options);
+      element.remove();
+    },
+    { auto: true },
+  ],
+});
+
+export const applicationTest = baseTest.extend({
+  app: ({}, use) => use(App),
+  element: ({}, use) => use(document.createElement("div")),
+  context: ({}, use) => use({}),
+  env: [
+    async ({ app, element, context }, use) => {
+      document.body.append(element);
+
+      console.log(app);
+
+      setApplication(app.create({ autoboot: false, rootElement: element }));
+      await setupContext(context, options);
+      await setupApplicationContext(context, options);
+
+      await use({
+        owner: context.owner,
+        element,
+        pauseTest,
+      });
+
+      await teardownContext(context, options);
+      element.remove();
+    },
+    { auto: true },
+  ],
+});

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "ember-vitest",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "integration for testing Ember with Vitest",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": "index.js",
+  "keywords": [
+    "ember",
+    "ember-addon",
+    "vite",
+    "vitest"
+  ],
+  "author": "NullVoxPopuli",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@ember/test-helpers": "^5.3.0",
+    "@embroider/core": "^4.2.0",
+    "@embroider/macros": "^1.18.1",
+    "@embroider/vite": "^1.2.0",
+    "@glimmer/component": "^2.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@testing-library/dom": "^10.4.1",
+    "@vitest/browser": "^3.2.4",
+    "babel-plugin-ember-template-compilation": "^3.0.1",
+    "decorator-transforms": "^2.3.0",
+    "ember-source": "^6.7.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-ember-template-tag": "^2.1.0",
+    "vite": "^7.1.6",
+    "vitest": "^3.2.4",
+    "webdriverio": "^9.19.2"
+  },
+  "ember-addon": {
+    "version": 2,
+    "type": "addon",
+    "main": "./ember-addon-main.cjs"
+  },
+  "peerDependencies": {
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": "^20.11.0 || ^22 || >=24"
+  },
+  "dependencies": {
+    "ember-strict-application-resolver": "^0.1.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:dev": "vitest"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,7 @@
+minimumReleaseAge: 1440
+ignoreScripts: true
+
+peersSuffixMaxLength: 40
+autoInstallPeers: false
+dedupeInjectedDeps: true
+dedupePeerDependents: true

package/tests/application/sample-test.gjs

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { applicationTest } from "ember-vitest";
+import { visit, pauseTest } from "@ember/test-helpers";
+
+import EmberRouter from "@ember/routing/router";
+import Application from "ember-strict-application-resolver";
+
+class Router extends EmberRouter {
+  location = "none";
+  rootUrl = "/";
+}
+
+class App extends Application {
+  modules = {
+    "./router": Router,
+    "./templates/application": <template>hello there</template>,
+  };
+}
+
+describe("Home", () => {
+  applicationTest.scoped({ app: ({}, use) => use(App) });
+
+  applicationTest("can visit the home screen", async ({ element, env }) => {
+    await visit("/");
+
+    expect(element.textContent).toBe("hello there");
+  });
+});

package/tests/container/sample-test.gjs

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { test } from "ember-vitest";
+import Service from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+
+class Foo extends Service {
+  @tracked count = 0;
+}
+
+import Application from "ember-strict-application-resolver";
+
+class App extends Application {
+  modules = {
+    "./services/foo": Foo,
+  };
+}
+
+describe("Container", () => {
+  test.scoped({ app: ({}, use) => use(App) });
+
+  test("works", async ({ context }) => {
+    let foo = context.owner.lookup("service:foo");
+
+    expect(foo.count).toBe(0);
+    foo.count++;
+    expect(foo.count).toBe(1);
+  });
+});

package/tests/rendering/sample-test.gjs

@@ -0,0 +1,27 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { describe, it, expect } from "vitest";
+import { renderingTest } from "ember-vitest";
+import { find, click, render, pauseTest } from "@ember/test-helpers";
+
+class Counter extends Component {
+  @tracked count = 0;
+  increment = () => this.count++;
+
+  <template>
+    <output>{{this.count}}</output>
+    <button onclick={{this.increment}}>++</button>
+  </template>
+}
+
+describe("Counter", () => {
+  renderingTest("can interact", async () => {
+    await render(<template><Counter /></template>);
+
+    expect(find("output").textContent).toBe("0");
+
+    await click("button");
+
+    expect(find("output").textContent).toBe("1");
+  });
+});

package/vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from "vite";
+
+import { ember, extensions } from "@embroider/vite";
+import { babel } from "@rollup/plugin-babel";
+
+export default defineConfig({
+  test: {
+    include: ["tests/**/*-test.{gjs,gts}"],
+    browser: {
+      provider: "webdriverio",
+      enabled: true,
+      // at least one instance is required
+      instances: [
+        { browser: "chrome" },
+        // { browser: 'firefox' },
+        // { browser: 'edge' },
+        // { browser: 'safari' },
+      ],
+    },
+  },
+  plugins: [
+    ember(),
+    babel({
+      babelHelpers: "runtime",
+      extensions,
+    }),
+  ],
+});