Setting up a superfast CI with Vitest and GitHub Actions (2023)

What is GitHub Actions?

I think nobody could describe it better than GitHub itself in its official docs.

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.

GitHub Actions goes beyond just DevOps and lets you run workflows when other events happen in your repository. For example, you can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository.

GitHub provides Linux, Windows, and macOS virtual machines to run your workflows, or you can host your own self-hosted runners in your own data center or cloud infrastructure.

So when you are already using GitHub to manage your source code, it is the easiest way to also make your CI there and not add another tool to your process.

Setting up GitHub actions is also an easy task, basically it is just another file in your codebase and GitHub guides you through the setup process. You just need to know what to do.

Setting up a superfast CI with Vitest and GitHub Actions (1)

But don't worry, this is what this article is about.

What is Vitest?


When you are reading this, you probably have already heard of Vite (french for Quick).

Vite is an amazing build tool developed by Evan You, Anthony Fu, patak and 533 more amazing developers. Vite is build to save you time and increase your developers experience by lots of incredible features like Rollup builds and superfast HMR by serving files via native ES modules.

Jest and some other state of the art test runners were having problems with vite the core team also decided to come up with an own test runner called vitest. Vitest is build with the developers in mind and therefore provides a breathtaking developer experience. It is easy to set up since it reuses the vite.config.js you already have and is also superfast.

I talk a bit deeper about vitest and its UI in this article.

(Video) Understanding GitHub Actions - Automated Testing

If you want to learn more about the Vite ecosystem, here is an interesting article from patak for you.

Why Should I Use a CI?

Let's first start talking about the sake of a Continuous integration (CI) and Continuous Delivery (CD).

You are using CI/CD systems because you want to ship smaller features continuously during your iterations instead of just shipping on huge update every few months.

Using a CI reduces the risk of breaking huge parts of your codebase. You just can break tiny parts, which is much easier to fix, since you know what feature caused the problem. It is also easy to roll back this changes when you have just small incremental steps till this issue is fixed.

Another advantage of CI is that you can include your tests into this CI systems, which means that you can run your tests on every commit on a specific branch (master, Deploy or whatever you want to ship). Every time when you commit or merge on master, the tests will be executed before deploying the application. If the tests fail, the deployment process will abort and the tests needs to pass before you are allowed to ship this feature.

To summarize, using a CI will significantly improve your codes quality and reduces the time for testing and shipping. So it is a complete Win for you and your users. The only things you need to do is writing tests (which you generally should do) and setting up an CI on your platform of choice.

I will guide you now through the steps on setting up a CI with GitHub Actions.

How to set up a CI with Vitest and GitHub Actions?

1. Go to GitHub actions and chose the node.js template

Setting up a superfast CI with Vitest and GitHub Actions (2)

You will see an empty template

Setting up a superfast CI with Vitest and GitHub Actions (3)

You can give it a meaning full name in line 4.

2. Chose a branch to execute.

In line 8 you now should define the branches where these Actions should be executed.

In line 10 you can also define branches where the actions should be executed after an PR. This gives the developer reviewing the PR already a Test report to see if all tests were passing.

(Video) Setting up vite, React, TypeScript, eslint, prettier, vitest, testing-library and react-router

If you leave everything on master, it will look like below.

on: push: branches: [main] pull_request: branches: [main]

3. Chose your node version.

Since vite just work on node ≥ 14 I recommend using node 16.x. This is the latest node LTS version, where everything should work.

node-version: [16.x]

4. Install your dependencies.

To Install your dependencies, you can either run npm install or npm ci

What is the difference between NPM Install and NPM CI?

Npm install is made to be used on the developer's machine. It reads the package.json and checks if it is already in package-lock.json. If not, it will be added and installed. If yes, it will get the defined version out of package-lock and install this version if it is not already installed.

Npm CI (Clean Install) is made to run in automated environments like our CI and give us a clean deterministic state to run the tests on.

Npm CI never edits package.json or package-lock.json. Before installing, it will delete all node-modules. Then all dependencies will directly be installed from package-lock.json and package.json is only used for cross-checking. If a dependency is not in package-lock.json it will not add it and throw an error instead.

5. Run your Unit tests.

After everything is installed, we can finally run our Unit tests. 🥳

If you have multiple types of tests (Unit and e2e) in place, you need different comments to start vite and cypress.

To do so, go to your package.json and edit the test line, like I did here.

"test:unit": "vitest"

This will run our Unit tests using vitest.

(Video) 🧪 Test SvelteKit with TDD & VITEST 🧪

Inside GitHub Actions, then simply run

npm run test:unit

Vitest will automatically recognize that you are in a CI and will only run once and not watch for code changes!

6. (Optional) Deploy

As a last step, you can deploy your application to Azure Static or any other hosting provider.

Since this commands strongly differs for the different providers and services you want to host on, I would recommend you to check out their guides.

Azure Static for example provides you an own GitHub action to deploy it to their service.

You then can just take the test steps from this article and add it before the build and deploy steps to test everything before it gets deployed.

 - name: Execute Unit tests - run: npm ci - run: npm run test:unit

The resulting GitHub Actions file to run Vitest

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node# For more information see: Runs All Unit testson: push: branches: [main] pull_request: branches: [main]jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [16.x] # See supported Node.js release schedule at steps: - uses: actions/checkout@v3 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 with: node-version: ${{ matrix.node-version }} cache: "npm" #- run: npm run build --if-present - name: Execute Unit tests - run: npm ci - run: npm run test:unit

Running the CI inside GitHub Actions

Setting up a superfast CI with Vitest and GitHub Actions (4)

After everything is set up, GitHub actions will run your tests after each time you pushed something in your branch.

For a failing run, you can see the step where the pipeline has failed.

Setting up a superfast CI with Vitest and GitHub Actions (5)

(Video) How to test Vite projects using Vitest

When expanding this pipeline, you will see the same output as you are seeing when you are running vitest in your console.

Setting up a superfast CI with Vitest and GitHub Actions (6)

So you see why these tests were failing and how many files were affected.

For this case, I uninstalled this package and forgot updating my tests before pushing. I now directly get an Email notification when something like this happens and can directly see what I messed up with my last commit. Therefore, I can catch errors before they reach the Users or in this case confuses my coworkers.

If you are going to resolve it, I recommend using Vitest UI to get a live overview on your test results.

I wrote an article about it here.


Vitest is currently still in beta, therefore even if it's working great already you can encounter bugs and issues. I would not recommend using it in Production till a stable release is out. But I encourage you to try it out and have everything in place when a stable version is released.


I hope I could help you to set up your Ci and therefore improving your code Quality. The concepts you learned i n this article is not only limited to vitest and GitHub actions. Most CI tools have a similar syntax and similar concepts. Same for test runners.

Since Vitest is also pretty new for me, I will update this article frequently and add also new Articles when I'm trying out new features of Vitest.

If you want to stay up to date, you can follow me on Twitter.

If you want to support me and the work I’m doing, you can buy me a coffee.

Happy, coding asserting,


(Video) Running NodeJS Tests/CI with GitHub Actions/Workflow


Setting up a superfast CI with Vitest and GitHub Actions? ›

About continuous integration using GitHub Actions

You can configure your CI workflow to run when a GitHub event occurs (for example, when new code is pushed to your repository), on a set schedule, or when an external event occurs using the repository dispatch webhook.

How GitHub Actions can be used to automate continuous integration? ›

About continuous integration using GitHub Actions

You can configure your CI workflow to run when a GitHub event occurs (for example, when new code is pushed to your repository), on a set schedule, or when an external event occurs using the repository dispatch webhook.

What is the difference between CI and GitHub Actions? ›

Repository Compatibility

CircleCI works with private or public repositories stored on Bitbucket or GitHub. However, GitHub Actions works with repositories stored on GitHub only. CircleCI can run a push to a branch before a pull request is created, which means a new job is not triggered once a pull request is opened.

How to setup CI CD pipeline in GitHub for Salesforce? ›

How To Setup CI/CD Using GitHub Actions for Salesforce
  1. Create .github a folder within the parent directory of your Git Repo.
  2. Create workflow folder within .github folder.
  3. Create github-actions-demo.yml file within workflow folder and use below sample YML code for the initial setup.
Apr 13, 2023

Is GitHub good for CI CD? ›

Key advantages of using GitHub Actions for CI/CD pipelines

There's no need to manually configure and set up CI/CD. You don't have to set up webhooks, you don't have to buy hardware, reserve some instances out there, keep them up to date, do security patches, or spool down idle machines.

Is GitHub Actions better than Azure DevOps? ›

Azure DevOps Pipelines is known for its flexibility and customisability, allowing teams to build highly customized workflows that fit their specific needs. GitHub Actions is more limited in terms of customization, although it does offer a wide range of pre-built actions and integrations.

What is the difference between Jenkins pipeline and GitHub Actions? ›

Jenkins creates workflows using Declarative Pipelines, which are similar to GitHub Actions workflow files. Jenkins uses stages to run a collection of steps, while GitHub Actions uses jobs to group one or more steps or individual commands. Jenkins and GitHub Actions support container-based builds.

How does CI CD work in GitHub? ›

Continuous integration (CI) automatically builds, tests, and integrates code changes within a shared repository; then. Continuous delivery (CD) automatically delivers code changes to production-ready environments for approval; or. Continuous deployment (CD) automatically deploys code changes to customers directly.

Does GitHub have a CI CD pipeline? ›

GitHub introduced GitHub Actions in 2018. Because of GitHub's open nature, it's not the only tool that you can use to implement CI/CD automation for GitHub-based projects; others, such as Azure Pipelines and Jenkins, may be preferable in some situations.

How do you create a CI CD pipeline for automation testing? ›

The testing process goes through the following stages in the CI/CD model:
  1. Develop: the development team develops the code as per the requirements.
  2. Writing tests: After code is developed, the tests are written for that code.
  3. Local Testing: The local testing of the code is done to ensure the quality of the code.
Feb 23, 2023

Is GitHub Actions a CI CD tool? ›

GitHub Actions is an automated CI/CD platform that integrates with GitHub to create seamless, versatile CI/CD pipelines. Here's how it works.

Can GitHub Actions replace Jenkins? ›

For a startup or small business, GitHub Actions is an obvious choice for a CI/CD platform because your engineers may already have some familiarity with YAML. Jenkins will be operated on a personal server. This implies that you will need to regularly maintain the Jenkins server.

How do I trigger Jenkins pipeline from GitHub? ›

Steps for Jenkins GitHub Webhook integration
  1. Create a Jenkins build job that uses a GitHub URL.
  2. Click the GitHub hook trigger for GITScm polling checkbox on the build job.
  3. Create and copy a Jenkins API token for the Jenkins user who will run the build job.
  4. Create a trigger in your GitHub repository's settings page.
Dec 3, 2020

How to setup Jenkins pipeline with GitHub? ›

How to Set Up the Jenkins + GitHub Integration
  1. Step 1: go to your GitHub repository and click on 'Settings'.
  2. Step 2: Click on Webhooks and then click on 'Add webhook'.
  3. Step 3: In the 'Payload URL' field, paste your Jenkins environment URL. ...
  4. Step 4: In the page 'Which events would you like to trigger this webhook?
Jul 21, 2022


1. This Week in Svelte (2023 March 23) - SvelteKit 1.13.0, Vitest and Playwright overview
(Svelte Society)
2. Vite in 100 Seconds
3. Getting Started With Vitest in WebStorm
4. 2022-08-31 - Setting up vite + React + TypeScript + eslint + prettier + vitest + @testing-library
(Coding Garden Archive)
5. Testing JavaScript project with Vitest | Web Dev Office Hours
(Akamai DevRel)
6. Test-Driven Development // Fun TDD Introduction with JavaScript
Top Articles
Latest Posts
Article information

Author: Errol Quitzon

Last Updated: 16/11/2023

Views: 5623

Rating: 4.9 / 5 (79 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Errol Quitzon

Birthday: 1993-04-02

Address: 70604 Haley Lane, Port Weldonside, TN 99233-0942

Phone: +9665282866296

Job: Product Retail Agent

Hobby: Computer programming, Horseback riding, Hooping, Dance, Ice skating, Backpacking, Rafting

Introduction: My name is Errol Quitzon, I am a fair, cute, fancy, clean, attractive, sparkling, kind person who loves writing and wants to share my knowledge and understanding with you.