Getting started

npm add --save-dev ember-vitest vitest @vitest/browser @vitest/browser-webdriverio

Then configure vite. See Setup.

Write a test

Use render to render a component and get locators for it:

import { describe, expect, test } from "vitest";
import { render } from "ember-vitest";

import { Button } from "#src/components/ui/button.gts";

describe("Button", () => {
  test("forwards native disabled behavior", async () => {
    const screen = await render(
      <template>
        <Button disabled>Unavailable</Button>
      </template>,
    );

    await expect
      .element(screen.getByRole("button", { name: "Unavailable" }))
      .toBeDisabled();
  });
});

TIP

Use expect.soft to see all of the failed assertions of a test at once, not only the first one:

import { expect as hardExpect } from "vitest";

const expect = hardExpect.soft;

expect.soft has no element, so use hardExpect.element for locators.

Run the tests

pnpm vitest
# or
npm exec vitest

Where to go next

• Vanilla Vitest shows a test without this library, so you can see what render does for you.
• Core APIs are the APIs that most tests need.
• Additional testing styles integrate with @ember/test-helpers and with the owner of your app.