Getting started with Allure Vitest

Generate beautiful HTML reports using Allure Report and your Vitest tests.

INFO

Check out the example projects at github.com/allure-examples to see Allure Vitest in action.

Setting up

1. Prepare your project

Make sure Node.js is installed.
Allure Vitest is tested against Node.js 18 and higher. Older versions may work, but we can't guarantee that.
Open a terminal and go to the project directory. For example:
bash
```
cd /home/user/myproject
```
Make sure Allure Report is installed. If it's not, follow the installation instructions. Note that Allure Report requires Java.

Install the Allure Vitest integration and make sure that all the packages it needs are installed.

npmyarnpnpm

bash

npm install --save-dev vitest @vitest/runner allure-vitest

bash

yarn add --dev vitest @vitest/runner allure-vitest allure-js-commons

bash

pnpm add -D vitest @vitest/runner allure-vitest

WARNING

If you run the tests and see the “no vitest context is detected” error, make sure the vitest and @vitest/runner packages are both listed as your project's devDependencies and have the same version.

If you plan to run tests in a real browser using Vitest Browser Mode, also install @vitest/browser and a browser provider. Allure Vitest supports the Playwright provider:

npmyarnpnpm

bash

npm install --save-dev @vitest/browser @vitest/browser-playwright playwright
npx playwright install chromium

bash

yarn add --dev @vitest/browser @vitest/browser-playwright playwright
yarn playwright install chromium

bash

pnpm add -D @vitest/browser @vitest/browser-playwright playwright
pnpm playwright install chromium

Modify your Vitest configuration file, e.g., vitest.config.ts.

In the list of setup files, add "allure-vitest/setup" (for most package managers) or require.resolve("allure-vitest/setup") (for Yarn PnP).
In the list of reporters, add "allure-vitest/reporter".
Optionally, specify resultsDir and other options for the reporter. See Allure Vitest configuration for more details.

Normal configurationConfiguration for Yarn PnP

import AllureReporter from "allure-vitest/reporter";
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    setupFiles: ["allure-vitest/setup"],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          resultsDir: "allure-results",
        },
      ],
    ],
  },
});

import AllureReporter from "allure-vitest/reporter";
import { defineConfig } from "vitest/config";

const require = createRequire(import.meta.url);

export default defineConfig({
  test: {
    setupFiles: [require.resolve("allure-vitest/setup")],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          resultsDir: "allure-results",
        },
      ],
    ],
  },
});

2. Run tests

Run your Vitest tests same way as your would run them usually. For example:

npmyarnpnpm

bash

npm test

bash

yarn test

bash

pnpm test

This will save necessary data into allure-results or other directory, according to the configuration. If the directory already exists, the new files will be added to the existing ones, so that a future report will be based on them all.

3. Generate a report

Finally, convert the test results into an HTML report. This can be done by one of two commands:

allure generate processes the test results and saves an HTML report into the allure-report directory. To view the report, use the allure open command.
allure serve creates the same report as allure generate, then automatically opens the main page of the report in a web browser.

Writing tests

The Allure Vitest integration extends the standard reporting features of Vitest by providing additional capabilities for crafting more informative and structured tests. This section highlights key enhancements that can be utilized:

Metadata Annotation: Enhance test reports with descriptions, links, and other metadata.
Test Organization: Structure your tests into clear hierarchies for better readability and organization organize tests.
Step Division: Break down tests into smaller test steps for easier understanding and maintenance.
Parametrized Tests: Clearly describe the parameters for parametrized tests to specify different scenarios.
Set labels globally: Use environment variables to set metadata and other labels.
Attachments: Automatically capture screenshots and other files during test execution.
Test Selection: Use a test plan file to select which tests to run, allowing for flexible test execution.
Environment Details: Include comprehensive environment information to accompany the test report.

In most cases, Allure Vitest provides two different ways to use a feature: the Runtime API and the Metadata API.

Runtime API: use Allure's functions to add certain data to the test result during its execution. This approach allows for constructing the data dynamically.
Note that it is recommended to call the Allure's functions as close to the beginning of the test as possible. This way, the data will be added even if the test fails early.
Metadata API: add a metadata tag (beginning with @) into the test name. Allure Vitest will extract it and update the test result's data accordingly. When using this approach, the data is guaranteed to be added regardless of how the test itself runs.

Add Metadata

Allure allows you to enrich your reports with a variety of metadata. This additional information provides context and details for each test, enhancing the report's usefulness. Refer to the metadata reference section for an exhaustive list of what can be added.

Runtime APIMetadata API

import * as allure from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.displayName("Test Authentication");
  await allure.owner("John Doe");
  await allure.tags("Web interface", "Authentication");
  await allure.severity("critical");
  // ...
});

import { test } from "vitest";

test(
  "Test Authentication" +
    " @allure.label.owner:JohnDoe" +
    " @allure.label.tag:WebInterface" +
    " @allure.label.tag:Authentication" +
    " @allure.label.severity:critical",
  async () => {
    // ...
  },
);

Organize tests

As described in Improving navigation in your test report, Allure supports multiple ways to organize tests into hierarchical structures.

To specify a test's location in the behavior-based hierarchy:

Runtime APIMetadata API

import * as allure from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.epic("Web interface");
  await allure.feature("Essential features");
  await allure.story("Authentication");
  // ...
});

import { test } from "vitest";

test(
  "Test Authentication" +
    " @allure.label.epic:WebInterface" +
    " @allure.label.feature:EssentialFeatures" +
    " @allure.label.story:Authentication",
  async () => {
    // ...
  },
);

To specify a test's location in the suite-based hierarchy:

Runtime APIMetadata API

import * as allure from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.parentSuite("Tests for web interface");
  await allure.suite("Tests for essential features");
  await allure.subSuite("Tests for authentication");
  // ...
});

import { test } from "vitest";

test(
  "Test Authentication" +
    " @allure.label.parentSuite:TestsForWebInterface" +
    " @allure.label.suite:TestsForEssentialFeatures" +
    " @allure.label.subSuite:TestsForAuthentication",
  async () => {
    // ...
  },
);

Divide a test into steps

To create steps and sub-steps, you can use the step() function, see the reference.

import * as allure from "allure-js-commons";
import { Status } from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.step("Step 1", async () => {
    await allure.step("Sub-step 1", async (ctx) => {
      await ctx.parameter("foo", "1");
      // ...
    });
    await allure.step("Sub-step 2", async (ctx) => {
      await ctx.parameter("foo", "2");
      // ...
    });
  });
  await allure.logStep("Step 2", Status.SKIPPED);
});

Describe parametrized tests

Since tests in Vitest, unlike in some other frameworks, are written as anonymous functions, it is very easy to implement the parametrized tests pattern, i.e. to run the same test logic with different test data. To do so, just write the test inside a loop and use the variable parameters in both its title and its body.

To display a parameter value in the test report, pass it to the parameter() function.

Using test()Using test.each()

import * as allure from "allure-js-commons";
import { test } from "vitest";

for (const login of ["johndoe", "[email protected]"]) {
  test(`Test Authentication as ${login}`, async () => {
    await allure.parameter("login", login);
    await allure.parameter("time", new Date().toUTCString(), { excluded: true });
    // ...
  });
}

import * as allure from "allure-js-commons";
import { test } from "vitest";

test.each(["johndoe", "[email protected]"])("Test Authentication as %s", async (login) => {
  await allure.parameter("login", login);
  await allure.parameter("time", new Date().toUTCString(), { excluded: true });
  // ...
});

Set labels globally

Any labels, including custom ones, can be set via the environment variables in your operating system. Here's an example (assuming you use the npm package manager):

MacOS/LinuxWindows

bash

export ALLURE_LABEL_epic=WebInterface
npm test

powershell

$Env:ALLURE_LABEL_epic = "WebInterface"
npm test

Attach screenshots and other files

In Allure reports, you have the ability to attach various types of files, which can greatly enhance the comprehensibility of the report. A common practice is to attach screenshots that capture the state of the user interface at specific moments during test execution.

For detailed instructions on how to implement attachments, refer to the attachments section in the Allure Vitest reference.

import * as allure from "allure-js-commons";
import { ContentType } from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  // ...

  await allure.attachment("Text file", "This is the file content.", ContentType.TEXT);

  await allure.attachmentPath("Screenshot", "/path/to/image.png", {
    contentType: ContentType.PNG,
    fileExtension: "png",
  });
});

Select tests via a test plan file

If the ALLURE_TESTPLAN_PATH environment variable is defined and points to an existing file, Vitest will only run tests listed in this file.

Here's an example of running tests according to a file named testplan.json (assuming you use the npm package manager):

MacOS/LinuxWindows

bash

export ALLURE_TESTPLAN_PATH=testplan.json
npm test

powershell

$Env:ALLURE_TESTPLAN_PATH = "testplan.json"
npm test

Environment information

For the main page of the report, you can collect various information about the environment in which the tests were executed. To do so, edit the environmentInfo object in the configuration.

For example, it is a good idea to use this to remember the OS version and Node.js version retrieved from the os and process objects. This may help the future reader investigate bugs that are reproducible only in some environments.

import { createRequire } from "node:module";
import * as os from "node:os";
import { defineConfig } from "vitest/config";

const require = createRequire(import.meta.url);

export default defineConfig({
  test: {
    setupFiles: [require.resolve("allure-vitest/setup")],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          environmentInfo: {
            os_platform: os.platform(),
            os_release: os.release(),
            os_version: os.version(),
            node_version: process.version,
          },
        },
      ],
    ],
  },
});

Note that if your launch includes multiple Vitest runs (see How it works), Allure Vitest will only save the environment information from the latest run.

Using Browser Mode

Vitest Browser Mode runs your tests inside a real browser instead of a simulated DOM environment.

INFO

Browser Mode support requires Vitest 4 or later.

To enable Browser Mode, add a browser block to your Vitest configuration. In Vitest 4, the browser provider is imported as a factory from its own package:

import { playwright } from "@vitest/browser-playwright";
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    setupFiles: ["allure-vitest/browser/setup"],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          resultsDir: "allure-results",
        },
      ],
    ],
    browser: {
      enabled: true,
      provider: playwright(),
      instances: [{ browser: "chromium" }],
    },
  },
});

WARNING

allure-vitest/browser/setup is not interchangeable with allure-vitest/setup. The browser setup file is designed to run in a browser context and registers additional commands required for test plan filtering. If your project has both unit tests and browser tests, use a separate Vitest config file for each, pointing to the appropriate setup file.

All standard Allure Vitest features — metadata, steps, attachments, and so on — work the same way in Browser Mode. In addition, you can capture screenshots of the browser page and attach them to the test result using the page object from vitest/browser:

import * as allure from "allure-js-commons";
import { ContentType } from "allure-js-commons";
import { test } from "vitest";
import { page } from "vitest/browser";

test("Renders the login form", async () => {
  // ... render and interact with the page ...

  const screenshotPath = await page.screenshot();
  await allure.attachmentPath("Page screenshot", screenshotPath, {
    contentType: ContentType.PNG,
    fileExtension: "png",
  });
});

For more details on attaching screenshots and other files, see the attachments section in the Allure Vitest reference.

Install & Upgrade

Install & Upgrade

Getting started with Allure Vitest

Setting up

1. Prepare your project

2. Run tests

3. Generate a report

Writing tests

Add Metadata

Organize tests

Divide a test into steps

Describe parametrized tests

Set labels globally

Attach screenshots and other files

Select tests via a test plan file

Environment information

Using Browser Mode

Powered by

Subscribe to our newsletter

Allure TestOps

Company

Getting started with Allure Vitest ​

Setting up ​

1. Prepare your project ​

2. Run tests ​

3. Generate a report ​

Writing tests ​

Add Metadata ​

Organize tests ​

Divide a test into steps ​

Describe parametrized tests ​

Set labels globally ​

Attach screenshots and other files ​

Select tests via a test plan file ​

Environment information ​

Using Browser Mode ​

Powered by

Subscribe to our newsletter

Allure TestOps

Company

Getting started with Allure Vitest

Setting up

1. Prepare your project

2. Run tests

3. Generate a report

Writing tests

Add Metadata

Organize tests

Divide a test into steps

Describe parametrized tests

Set labels globally

Attach screenshots and other files

Select tests via a test plan file

Environment information

Using Browser Mode