Skip to main content

Vitest

Installation​

Install the reporter:

npm install --save-dev vitest-orangebeard-reporter

The source code can be found on GitHub: Vitest Reporter

For local development of this repo, run npm install in the project root instead.

Configuring Orangebeard​

Create a new file named orangebeard.json in the project root folder, next to package.json. Add the following entry:

{
"endpoint": "https://app.orangebeard.io/[ORGANIZATION]",
"token": "[LISTENER TOKEN]",
"project": "example-project",
"testset": "Vitest Test set",
"description": "Vitest run",
"attributes": [
{
"key": "Tool",
"value": "Vitest"
}
],
"referenceUrl": "https://docs.orangebeard.io/"
}

It's good practice to omit the token from the json file and get it from your env:

Windows cmd:

set orangebeard_token=[LISTENER TOKEN]

Linux/Mac:

export orangebeard_token=[LISTENER TOKEN]

Environment properties​

Properties can also be set in the build, by passing them as environment variables.
It's important to mention that environment variables have precedence over the orangebeard.json definition.

$ export ORANGEBEARD_ENDPOINT=https://app.orangebeard.io/[ORGANIZATION]
$ export ORANGEBEARD_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
$ export ORANGEBEARD_PROJECT=example_project
$ export ORANGEBEARD_TESTSET=Vitest testset
$ export ORANGEBEARD_DESCRIPTION=My awesome testrun
$ export ORANGEBEARD_ATTRIBUTES=key:value; value;

Using the reporter in Vitest​

Add the reporter to your vitest.config.ts:

import { defineConfig } from 'vitest/config';
import OrangebeardVitestReporter from 'vitest-orangebeard-reporter';

export default defineConfig({
test: {
reporters: [new OrangebeardVitestReporter()],
},
});

If you are using a monorepo or custom project configuration, make sure the reporter is added to the Vitest project where you want results to be sent to Orangebeard.

Running with coverage​

When running Vitest with coverage enabled (for example using the built-in v8 provider):

npx vitest run --coverage

The reporter will:

  • Collect the aggregated coverage map from Vitest via onCoverage.
  • At the end of the run, create a dedicated AFTER test called "Coverage report" in a top-level Coverage suite.
  • Attach a Markdown table log with one row per file, including line / statement / branch / function percentages.

This gives you a single place in Orangebeard where you can inspect per-file coverage for the run.

Mapping Vitest to Orangebeard​

The reporter follows these mapping rules:

  • Test run

    • onTestRunStart creates an Orangebeard test run using the configured testset, description and attributes from the JavaScript client.
    • onTestRunEnd waits for any pending async work (attachments) and then finishes the test run.
  • Suites

    • Each test file becomes a root suite, using the path relative to the current working directory (e.g. tests/sample.test.ts).
    • Nested describe blocks are represented as nested Orangebeard suites beneath the file suite.
  • Tests

    • Each Vitest it/test becomes an Orangebeard test.
    • The test name is taken from test.name.
    • The description includes the source location when available, e.g. sample.test.ts:10.
    • Status is mapped from Vitest state (passed, failed, skipped, pending, ...) to FinishTest.Status.
  • BEFORE / AFTER classification

    • Test names that contain beforeAll, before all, beforeEach, before each or setup are reported as TestType.BEFORE.
    • Test names that contain afterAll, after all, afterEach, after each or teardown are reported as TestType.AFTER.
  • Console logs

    • onUserConsoleLog receives Vitest console events and forwards them as Orangebeard logs.
    • Logs are attached to the running test when possible (using the Vitest task id → test UUID mapping).
    • Logs emitted before a test has started are buffered and flushed as soon as the test is created.
  • Attachments

    • When Vitest test artifacts are recorded (e.g. screenshots, traces written to disk), onTestCaseArtifactRecord logs a short summary entry and uploads the underlying file as an Orangebeard attachment.

Running this package locally​

  1. Install dependencies:
npm install
  1. Build the TypeScript sources:
npm run build
  1. Run the unit tests (including the reporter integration tests):
npx vitest run --coverage

This will also exercise the Orangebeard integration (using the mocked client in tests) and generate a coverage report for the reporter itself.

Sample project​

The tests/ folder in the GitHub repository contains sample tests that exercise:

  • Passing, failing, skipped and todo tests.
  • Global beforeAll / afterAll hooks.
  • Per-test beforeEach / afterEach hooks.
  • Console logging during tests and hooks.
  • Logging attachment files

When you run the sample suite with the reporter configured, you should see in Orangebeard:

  • A single test run with a suite named tests/sample.test.ts and nested suite sample suite.
  • Tests for each case and hook, with appropriate status and type (BEFORE / TEST / AFTER).
  • Console log entries attached to the relevant tests.
  • A Coverage suite with a "Coverage report" test containing a coverage table per file.
Ask Orangebeard