{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/azure-pipelines-meet-vitest",
  "description": "This post details how to integrate the test runner Vitest with Azure Pipelines.",
  "path": "/posts/azure-pipelines-meet-vitest",
  "publishedAt": "2023-08-05T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "azure pipelines",
    "automated testing"
  ],
  "textContent": "This post explains how to integrate the tremendous test runner Vitest with the continuous integration platform Azure Pipelines. If you read the post on integrating with Jest, you'll recognise a lot of common ground with this. Once again we want:\n\n1. Tests run as part of our pipeline\n2. A failing test fails the build\n3. Test results reported in Azure Pipelines UI\n\n\n\nThis post assumes we have a Vitest project set up and an Azure Pipeline in place. Let's get started.\n\nTests run as part of our pipeline\n\nFirst of all, lets get the tests running. We'll crack open our azure-pipelines.yml file and, in the appropriate place add the following:\n\nThe above will, when run, trigger a npm run test:ci in the src/client-app folder of the project (it's here where the app lives). What does test:ci do? Well, it's a script in the package.json that looks like this:\n\nYou'll note above we've got 2 scripts; test and test:ci. The former is the default script that Vitest will run when you run npm test. The latter is the script that we'll use in our pipeline. The difference between the two is that the test:ci script will:\n\n1. Doesn't run in watch mode\n2. Fail the build if any tests fail\n3. Produce a JUnit XML report which details test results. This is the format that Azure Pipelines can use to ingest test results.\n\nThe test results are written to reports/junit.xml which is a path relative to the src/client-app folder. Because you may test this locally, it's probably worth adding the reports folder to your .gitignore file to avoid it accidentally being committed.\n\nReport test results in Azure Pipelines UI\n\nOur tests are running, but we're not seeing the results in the Azure Pipelines UI. For that we need the PublishTestResults task.\n\nWe need to add a new step to our azure-pipelines.yml file _after_ our npm run test:ci step:\n\nThis will read the test results from our src/client-app/reports/junit.xml file and pump them into Pipelines. Do note that we're _always_ running this step; so if the previous step failed (as it would in the case of a failing test) we still pump out the details of what that failure was.\n\nAnd that's it! Azure Pipelines and Vitest integrated.\n\nPutting it all together\n\nThe complete azure-pipelines.yml additions look like this:\n\nPlease note, there's nothing special about the reports/junit.xml file. You can change the name of the file and/or the location of the file. Just make sure you update the testResultsFiles value in the PublishTestResults task to match.",
  "title": "Azure Pipelines meet Vitest"
}