Vitest browser support

.yarnrc.yml

@@ -12,6 +12,9 @@ packageExtensions:
   detox@*:
     dependencies:
       react-native: "*"
+  "@vitest/mocker@*":
+    dependencies:
+      vite: "*"
 
 plugins:
   - ./plugin-ci-version.cjs

packages/allure-codeceptjs/package.json

@@ -80,7 +80,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "codeceptjs": ">=2.3.6"

packages/allure-cucumberjs/package.json

@@ -87,7 +87,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "@cucumber/cucumber": ">=10.8.0",

packages/allure-cypress/package.json

@@ -91,7 +91,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "cypress": ">=12.17.4"

packages/allure-jasmine/package.json

@@ -81,7 +81,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "jasmine": ">=2.7.0"

packages/allure-jest/package.json

@@ -93,7 +93,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "jest": ">=24.8.0",

packages/allure-js-commons/package.json

@@ -102,7 +102,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "allure-playwright": "workspace:*"

packages/allure-js-commons/src/sdk/reporter/utils/envInfo.ts

@@ -1,9 +1,10 @@
+import { platform } from "node:process";
 /**
  * The implementation is based on https://github.com/gagle/node-properties.
  */
 import type { EnvironmentInfo } from "../../types.js";
 
-const EOL = process.platform === "win32" ? "\r\n" : "\n";
+const EOL = platform === "win32" ? "\r\n" : "\n";
 
 export const stringifyEnvInfo = (envInfo: EnvironmentInfo) => {
   const lines: string[] = [];

packages/allure-js-commons/src/sdk/runtime/runtime.ts

@@ -31,7 +31,10 @@ export const getGlobalTestRuntimeWithAutoconfig = (): TestRuntime | Promise<Test
   // protection from bundlers tree-shaking visiting (webpack, rollup)
   const pwAutoconfigModuleName = "allure-playwright/autoconfig";
 
-  return import(pwAutoconfigModuleName)
+  return import(
+    /* @vite-ignore */
+    pwAutoconfigModuleName
+  )
     .then(() => getGlobalTestRuntimeFunction()?.() ?? noopRuntime)
     .catch(() => noopRuntime);
 };

packages/allure-mocha/package.json

@@ -91,7 +91,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "mocha": ">=6.2.0"

packages/allure-playwright/package.json

@@ -90,7 +90,7 @@
     "npm-run-all2": "^8.0.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "@playwright/test": ">=1.53.0"

packages/allure-vitest/README.md

@@ -34,14 +34,14 @@ npm install -D allure-vitest
 
 ## Usage
 
-Add `"allure-vitest/setup"` to `setupFiles` and `"allure-vitest/reporter"` to `reporters`:
+Add next changes to your config file if you want to use vitest to run NodeJS tests only:
 
-```js
+```diff
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   test: {
-    setupFiles: ["allure-vitest/setup"],
++    setupFiles: ["allure-vitest/setup"],
     reporters: [
       "default",
       "allure-vitest/reporter",
@@ -50,25 +50,32 @@ export default defineConfig({
 });
 ```
 
+In case if you want to use [vitest for browser testing](https://vitest.dev/guide/browser/) add next changes:
 
-When the test run completes, the result files will be generated in the `./allure-results` directory.
-
-You may select another location, or further customize the reporter's behavior with [the configuration options](https://allurereport.org/docs/vitest-configuration/).
-
-### View the report
-
-> You need Allure Report to be installed on your machine to generate and open the report from the result files. See the [installation instructions](https://allurereport.org/docs/install/) on how to get it.
-
-Generate Allure Report after the tests are executed:
-
-```bash
-allure generate ./allure-results -o ./allure-report
-```
-
-Open the generated report:
+```diff
+import { defineConfig } from "vitest/config";
++ import { commands } from "allure-vitest/browser"
 
-```bash
-allure open ./allure-report
+export default defineConfig({
+  test: {
++    setupFiles: ["allure-vitest/browser/setup"],
+    reporters: [
+      "default",
+      "allure-vitest/reporter",
+    ],
+  },
+  browser: {
+    provider: playwright(),
+    enabled: true,
+    headless: true,
+    instances: [
+      { browser: "chromium" },
+    ],
++    commands: {
++      ...commands,
++    }
+  },
+});
 ```
 
 ## Allure API

packages/allure-vitest/package.json

@@ -35,6 +35,16 @@
       "types": "./dist/setup.d.ts",
       "import": "./dist/setup.js",
       "default": "./dist/setup.js"
+    },
+    "./browser": {
+      "types": "./dist/browser/index.d.ts",
+      "import": "./dist/browser/index.js",
+      "default": "./dist/browser/index.js"
+    },
+    "./browser/setup": {
+      "types": "./dist/browser/setup.d.ts",
+      "import": "./dist/browser/setup.js",
+      "default": "./dist/browser/setup.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -56,11 +66,16 @@
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.6.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/eslint": "^8.56.11",
     "@types/node": "^20.14.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vitest/runner": "^4.0.6",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/runner": "^4.0.18",
     "allure-commandline": "^2.29.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.0.0",
@@ -70,9 +85,12 @@
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "npm-run-all2": "^8.0.0",
+    "playwright": "^1.58.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "rimraf": "^6.0.0",
     "typescript": "^5.2.2",
-    "vitest": "^4.0.6"
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "@vitest/runner": ">=1.3.0",

packages/allure-vitest/src/browser/index.ts

@@ -0,0 +1,28 @@
+import type { Task } from "@vitest/runner";
+import { LabelName } from "allure-js-commons";
+import type { TestPlanV1 } from "allure-js-commons/sdk";
+import { includedInTestPlan, parseTestPlan } from "allure-js-commons/sdk/reporter";
+import { getTestMetadata } from "../utils.js";
+
+declare module "vitest/browser" {
+  interface BrowserCommands {
+    existsInTestPlan(task: Task): Promise<boolean>;
+  }
+}
+
+export const commands = {
+  existsInTestPlan: (ctx: any, task: Task) => {
+    if (!ctx.allureTestPlan) {
+      ctx.allureTestPlan = parseTestPlan();
+    }
+
+    if (!ctx.allureTestPlan) {
+      return true;
+    }
+
+    const { fullName, labels } = getTestMetadata(task);
+    const { value: id } = labels.find(({ name }) => name === LabelName.ALLURE_ID) ?? {};
+
+    return includedInTestPlan(ctx.allureTestPlan as TestPlanV1, { fullName, id });
+  },
+};

packages/allure-vitest/src/browser/setup.ts

@@ -0,0 +1,33 @@
+/* eslint no-underscore-dangle: "off" */
+import { afterEach, beforeAll, beforeEach } from "vitest";
+import { commands } from "vitest/browser";
+import { setGlobalTestRuntime } from "allure-js-commons/sdk/runtime";
+import { VitestTestRuntime } from "../VitestTestRuntime.js";
+import { allureVitestLegacyApi } from "../legacy.js";
+
+beforeAll(() => {
+  setGlobalTestRuntime(new VitestTestRuntime());
+});
+
+beforeEach(async ({ skip, task }) => {
+  (task as any).meta = {
+    ...task.meta,
+    // @ts-expect-error
+    vitestWorker: globalThis?.__vitest_worker__?.ctx?.workerId,
+  };
+
+  const inTestPlan = (await commands?.existsInTestPlan?.(task)) ?? true;
+
+  if (!inTestPlan) {
+    task.meta.allureSkip = true;
+    skip();
+    return;
+  }
+
+  globalThis.allure = allureVitestLegacyApi;
+});
+
+afterEach(() => {
+  // @ts-expect-error
+  globalThis.allure = undefined;
+});

packages/allure-vitest/src/index.ts

@@ -1,6 +1,15 @@
+/* eslint no-var: "off" */
+import { type TestPlanV1 } from "allure-js-commons/sdk";
 import type { AllureVitestLegacyApi } from "./legacy.js";
 
 declare global {
-  // eslint-disable-next-line
   var allure: AllureVitestLegacyApi;
+  var allureTestPlan: TestPlanV1 | undefined;
+}
+
+declare module "vitest" {
+  interface TaskMeta {
+    vitestWorker?: string;
+    allureSkip?: boolean;
+  }
 }

packages/allure-vitest/src/reporter.ts

@@ -78,12 +78,12 @@ export default class AllureVitestReporter implements Reporter {
     const {
       allureRuntimeMessages = [],
       allureGlobalRuntimeMessages = [],
-      VITEST_POOL_ID,
+      vitestWorker,
       allureSkip = false,
     } = task.meta as {
       allureRuntimeMessages: RuntimeMessage[];
       allureGlobalRuntimeMessages: RuntimeMessage[];
-      VITEST_POOL_ID: string;
+      vitestWorker: string;
       allureSkip?: boolean;
     };
 
@@ -115,7 +115,7 @@ export default class AllureVitestReporter implements Reporter {
       result.labels.push(...suiteLabels);
       result.labels.push(...getEnvironmentLabels());
       result.labels.push(getHostLabel());
-      result.labels.push(getThreadLabel(VITEST_POOL_ID && `vitest-worker-${VITEST_POOL_ID}`));
+      result.labels.push(getThreadLabel(vitestWorker && `vitest-worker-${vitestWorker}`));
       result.links.push(...metadataLinks);
 
       if (specPath) {

packages/allure-vitest/src/setup.ts

@@ -1,37 +1,31 @@
 import { afterAll, afterEach, beforeAll, beforeEach } from "vitest";
-import type { TestPlanV1 } from "allure-js-commons/sdk";
 import { parseTestPlan } from "allure-js-commons/sdk/reporter";
 import { setGlobalTestRuntime } from "allure-js-commons/sdk/runtime";
 import { VitestTestRuntime } from "./VitestTestRuntime.js";
 import { allureVitestLegacyApi } from "./legacy.js";
 import { existsInTestPlan } from "./utils.js";
 
 beforeAll(() => {
-  // @ts-ignore
   globalThis.allureTestPlan = parseTestPlan();
   setGlobalTestRuntime(new VitestTestRuntime());
 });
 
 afterAll(() => {
-  // @ts-ignore
   globalThis.allureTestPlan = undefined;
 });
 
 beforeEach(({ task, skip }) => {
   (task as any).meta = {
     ...task.meta,
-    VITEST_POOL_ID: process.env.VITEST_POOL_ID,
+    vitestWorker: globalThis?.process?.env?.VITEST_POOL_ID,
   };
 
-  // @ts-ignore
-  if (!existsInTestPlan(task, globalThis.allureTestPlan as TestPlanV1)) {
-    // @ts-ignore
+  if (!existsInTestPlan(task, globalThis.allureTestPlan)) {
     task.meta.allureSkip = true;
     skip();
     return;
   }
 
-  // @ts-ignore
   globalThis.allure = allureVitestLegacyApi;
 });