diff --git a/src/content/docs/ci-insights/test-frameworks/vitest.mdx b/src/content/docs/ci-insights/test-frameworks/vitest.mdx index 9d9f13a160..46f5303617 100644 --- a/src/content/docs/ci-insights/test-frameworks/vitest.mdx +++ b/src/content/docs/ci-insights/test-frameworks/vitest.mdx @@ -4,80 +4,103 @@ description: Report your test results from Vitest to CI Insights --- import vitestLogo from "../../../images/ci-insights/vitest/logo.svg" -import CommonTroubleshootingTips from "./_common-troubleshooting-tips.mdx" -import GhaMergifyCiQuarantineSetup from "./_gha_mergify_ci_quarantine_setup.mdx" import IntegrationLogo from "../../../../components/IntegrationLogo.astro" -import MergifyCIUploadStep from "../../../../components/MergifyCIUploadStep.astro" import CIInsightsSetupNote from "../../../../components/CIInsightsSetupNote.astro" -import MergifyCIUploadStepMatrix from "../../../../components/MergifyCIUploadStepMatrix.astro" -This guide shows how to configure [Vitest](https://vitest.dev/) to produce -JUnit reports and upload them to CI Insights within a GitHub Actions workflow. +This guide explains how to integrate [Vitest](https://vitest.dev/) with CI +Insights using the `@mergifyio/vitest` reporter. Once installed, test results +are automatically uploaded to CI Insights without any extra workflow changes. -## Generate a JUnit Report with Vitest +## Installation -By default, Vitest doesn't generate JUnit-format test results. You need to -enable it in your `vite.config.ts` or `vitest.config.ts`. +You need to install the +[`@mergifyio/vitest`](https://www.npmjs.com/package/@mergifyio/vitest) package +to automatically upload your test results to **CI Insights**. -This is [documenteded on vitest -website](https://vitest.dev/guide/reporters#junit-reporter). +### npm -For example: - -```javascript -export default defineConfig(({ mode }) => { - return { - test: { - reporters: ['default', 'junit'], - outputFile: './junit.xml', - includeConsoleOutput: true, - }, - }; -}); +```bash +npm install --save-dev @mergifyio/vitest ``` -Key Options: - -- `reporters: ['default', 'junit']`: Tells Vitest to generate JUnit reports - alongside the standard console output. +### yarn -- `outputFile: './junit.xml'`: Sets the path where Vitest writes the test - results (you can rename or relocate as you prefer). +```bash +yarn add --dev @mergifyio/vitest +``` -- `includeConsoleOutput: true`: Ensures console logs are captured in the final - report. +### pnpm -## Update Your GitHub Actions Workflow +```bash +pnpm add --save-dev @mergifyio/vitest +``` - +## Configuration -Once you have the JUnit file produced by Vitest, add a step to upload these -results to **CI Insights** via the `mergifyio/gha-mergify-ci` action. +Add the Mergify reporter to your `vitest.config.ts` (or `vite.config.ts`): -In the workflow file where vitest is launched, after running `npm run test` (or -similar), include a step like: +```typescript +import { defineConfig } from 'vitest/config'; +import MergifyReporter from '@mergifyio/vitest'; - +export default defineConfig({ + test: { + reporters: ['default', new MergifyReporter()], + }, +}); +``` - +The `'default'` reporter keeps the standard console output alongside the +Mergify reporter. - +## Modify Your Workflow -## Verify and Review in CI Insights + -After pushing these changes: +Your workflow should run your tests as usual while exporting the secret +`MERGIFY_TOKEN` as an environment variable. You'll need to add the following +code to the GitHub Actions step running your tests: -1. Your GitHub Actions workflow will run tests with Vitest. -2. Vitest generates junit.xml. -3. The Mergify CI action uploads that file to CI Insights. +```yaml +env: + MERGIFY_TOKEN: ${{ secrets.MERGIFY_TOKEN }} +``` -You can then see your test results, including failures and flaky tests, -directly in the CI Insights dashboard. +For example: -## Troubleshooting Tips +```yaml +- name: Run Tests 🧪 + env: + MERGIFY_TOKEN: ${{ secrets.MERGIFY_TOKEN }} + run: npm test +``` -
    - -
+The reporter automatically collects your test results and sends them to CI +Insights. + +Check the CI Insights dashboard afterward to view execution metrics, detect +flaky tests, and gather actionable feedback. + +## Environment Variables + +| Variable | Purpose | Default | +|----------|---------|---------| +| `MERGIFY_TOKEN` | API authentication token | **Required** | +| `MERGIFY_API_URL` | API endpoint location | `https://api.mergify.com` | +| `VITEST_MERGIFY_ENABLE` | Force-enable outside CI | `false` | +| `VITEST_MERGIFY_DEBUG` | Print spans to console | `false` | +| `MERGIFY_TRACEPARENT` | W3C distributed trace context | Optional | +| `MERGIFY_TEST_JOB_NAME` | Test job name identifier | Optional | + +:::tip + The reporter auto-activates in CI environments (detected via the `CI` + environment variable). To enable it outside CI, set + `VITEST_MERGIFY_ENABLE=true`. +::: + +:::tip + Use `MERGIFY_TEST_JOB_NAME` to make reports clearer in CI Insights, + especially when running multiple test suites or using a matrix strategy. +:::