keploy

Posted on Sep 9 • Originally published at keploy.io

Upgrade Your Node.js Testing: Seamlessly Switch from Jest to Vitest

Jest and Vitest are two well-known JavaScript testing frameworks, each with its own strengths. Jest, created by Facebook, is especially popular for React applications. It provides a "zero-config" setup, built-in code coverage reporting, and snapshot testing, making it a complete solution for many JavaScript projects.

Vitest, a newer framework in the Vite ecosystem, is known for its speed and lightweight design. Using Vite's dev server, Vitest performs very well, especially in larger projects. It works with most Jest APIs, making it easier for teams already using Jest to switch.

While Jest has a bigger community and more third-party tools, Vitest offers native TypeScript support and better integration with ES Modules. Both frameworks can test front-end and back-end code, but Vitest works especially well with Vite-based projects, giving it an advantage in that area.

Setting the Stage

Our application is a simple Express.js API that shows basic CRUD operations. We have an app.js file that sets up our Express app and imports routes from a routes.js file. This keeps our code organized and easy to maintain. The routes.js file has three endpoints: a root endpoint that returns a welcome message, a GET endpoint to get a list of users, and a POST endpoint to create a new user.

app/
├── app.js
├── routes.js
├── server.js
├── test/
│   └── routes.test.js
├── package.json

Our API is simple on purpose so we can focus on testing. The GET /users endpoint returns a hardcoded list of users. The POST /users endpoint simulates creating a user by accepting a name in the request body and returning a new user object with a generated ID. This simplicity helps us focus on how our tests are structured and how they interact with our Express app.

const request = require('supertest');
const app = require('../app');

describe('API Routes', () => {
    test('GET / should return welcome message', async () => {
        const res = await request(app).get('/');
        expect(res.statusCode).toBe(200);
        expect(res.body).toHaveProperty('message', 'Welcome to the Express Jest Demo API!');
    });

    test('GET /users should return list of users', async () => {
        const res = await request(app).get('/users');
        expect(res.statusCode).toBe(200);
        expect(res.body).toBeInstanceOf(Array);
        expect(res.body).toHaveLength(2);
        expect(res.body[0]).toHaveProperty('id');
        expect(res.body[0]).toHaveProperty('name');
    });

    test('POST /users should create a new user', async () => {
        const res = await request(app)
            .post('/users')
            .send({ name: 'Test User' });
        expect(res.statusCode).toBe(201);
        expect(res.body).toHaveProperty('id');
        expect(res.body).toHaveProperty('name', 'Test User');
    });

    test('POST /users should return 400 if name is missing', async () => {
        const res = await request(app)
            .post('/users')
            .send({});
        expect(res.statusCode).toBe(400);
        expect(res.body).toHaveProperty('error', 'Name is required');
    });
});

To ensure our API functions correctly, we've implemented a suite of Jest test cases. These tests are located in the tests/routes.test.js file and use the Supertest library to make HTTP requests to our Express app. Let's break down the test cases:

Welcome Message Test: This test verifies that the root endpoint (GET /) returns the expected welcome message with a 200 status code.
User List Retrieval Test: Here, we check if the GET /users endpoint returns an array of users with the correct structure and a 200 status code.
User Creation Test: This test ensures that the POST /users endpoint successfully creates a new user when provided with a valid name, returning the created user object with a 201 status code.
User Creation Error Handling Test: We also test the error case where a name is not provided in the request body, expecting a 400 status code and an appropriate error message.

These test cases check the basic functions of our API to make sure it works correctly in different situations. By using Jest and Supertest, we can simulate HTTP requests and verify the responses, which helps us trust our API's behavior without doing manual tests.

Step-by-Step Migration Process

Installing Vitest

The first step in our migration process is to update our project dependencies. We'll need to remove Jest and install Vitest along with some related packages. Here's how we can do that:

Removing Jest dependencies Let's start by removing Jest and any Jest-related packages from our project. Open your terminal and run the following command:
```
npm uninstall jest
```
Adding Vitest and related packages Now that we've removed Jest, let's install Vitest and the necessary related packages:
```
npm install --save-dev vitest supertest @vitest/coverage-v8
```

Configuring Vitest

While Vitest works out of the box for many projects, we'll create a configuration file to ensure smooth integration with our Express.js app. Create a new file named vitest.config.js in your project root with the following content:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'node',
  },
})

This configuration tells Vitest to use the Node.js environment for our tests, which is appropriate for our Express.js application.

We also need to update our package.json file to use Vitest instead of Jest for running tests. Replace the "test" script in your package.json with the following

"scripts": {
  "test": "vitest",
  "coverage": "vitest run --coverage"
}

This change allows us to run tests with npm test and generate a coverage report with npm run coverage.

Updating Test Files

Now that we have Vitest installed and set up, we need to update our existing test files. Luckily, Vitest is mostly compatible with Jest, so we only need to make a few changes. Let's update our test files to work with Vitest.

The first step in updating our test files is to change the import statements. Unlike Jest, which automatically makes test functions like describe, it, and expect available globally, Vitest requires us to import these functions explicitly (unless you've enabled globals in your Vitest config, which we did earlier).

import { describe, it, expect } from 'vitest';

While Vitest aims to be compatible with Jest, there are a few syntax differences to be aware of:

Vitest uses test and it interchangeably, just like Jest.
Vitest handles async tests in the same way as Jest, so your existing async tests should work without modification.
Vitest supports the same beforeEach, afterEach, beforeAll, and afterAll hooks as Jest. No changes are needed for these.

If you're using Jest's mocking capabilities, you might need to make some adjustments. Vitest provides its own mocking functions that are similar to Jest's. For example:

Replace jest.fn() with vi.fn()
Replace jest.spyOn() with vi.spyOn()
Replace jest.mock() with vi.mock()

Here's an example of how our updated __tests__/routes.test.js file might look after these changes:

import { describe, it, expect } from 'vitest';
import request from 'supertest';
import app from '../app';

describe('API Routes', () => {
  it('GET / should return welcome message', async () => {
    const res = await request(app).get('/');
    expect(res.statusCode).toBe(200);
    expect(res.body).toHaveProperty('message', 'Welcome to the Express Jest Demo API!');
  });

  it('GET /users should return list of users', async () => {
    const res = await request(app).get('/users');
    expect(res.statusCode).toBe(200);
    expect(res.body).toBeInstanceOf(Array);
    expect(res.body).toHaveLength(2);
    expect(res.body[0]).toHaveProperty('id');
    expect(res.body[0]).toHaveProperty('name');
  });

  it('POST /users should create a new user', async () => {
    const res = await request(app)
      .post('/users')
      .send({ name: 'Test User' });
    expect(res.statusCode).toBe(201);
    expect(res.body).toHaveProperty('id');
    expect(res.body).toHaveProperty('name', 'Test User');
  });

  it('POST /users should return 400 if name is missing', async () => {
    const res = await request(app)
      .post('/users')
      .send({});
    expect(res.statusCode).toBe(400);
    expect(res.body).toHaveProperty('error', 'Name is required');
  });
});

The changes needed to switch from Jest to Vitest are small for basic tests. The test structure and assertions stay mostly the same, making the migration easy and simple.

Potential Challenges and Solutions

While migrating from Jest to Vitest is generally straightforward, you may encounter some challenges along the way.

Vitest has better support for ESM, which might cause issues if your project uses CommonJS modules.

If you're using CommonJS (require syntax), you may need to update your import/export statements to use ESM syntax (import/export). Alternatively, you can configure Vitest to support CommonJS:

// vitest.config.js
export default {
  test: {
    environment: 'node'
  }
}

Best Practices Post-Migration

Congratulations 🎉 on successfully moving your test suite from Jest to Vitest! Now that you've switched, it's time to make the most of Vitest's features and improve your test suites. Let's look at some best practices to follow after the migration.

Utilize Concurrent Testing Vitest runs tests concurrently by default, which can significantly speed up your test suite. To take full advantage of this:

Ensure your tests are isolated and don't depend on shared state.

Use beforeEach and afterEach hooks to set up and tear down test environments.

import { beforeEach, afterEach, describe, it } from 'vitest';

describe('My Test Suite', () => {
  beforeEach(() => {
    // Set up test environment
  });

  afterEach(() => {
    // Clean up after each test
  });

  it('runs concurrently with other tests', () => {
    // Your test here
  });
});

Use Thread-based Parallelism For CPU-intensive tests, Vitest allows you to run tests in separate threads:

// vitest.config.js
export default {
  test: {
    threads: true
  }
}

Take Advantage of Built-in Code Coverage Vitest includes built-in code coverage reporting. Enable it in your configuration:

// vitest.config.js
export default {
  test: {
    coverage: {
      reporter: ['text', 'json', 'html']
    }
  }
}

Utilize Vitest UI Vitest offers a web-based UI for running and debugging tests. Start it with:

npx vitest --ui

Conclusion

Migrating from Jest to Vitest is easy and requires only a few changes for basic tests. Vitest has many benefits, like faster test runs, built-in TypeScript support, and easy integration with the Vite ecosystem. Although Jest is older and has a bigger community, Vitest's speed and modern features make it a great choice, especially for projects using Vite or those needing a lightweight solution.

Frequently Asked Questions

What is the difference between Jest and Vitest for testing JavaScript applications?

Jest is a popular testing framework for JavaScript, especially in React apps. It has strong features like snapshot testing, mocking, and built-in code coverage. Vitest is a newer framework made for the Vite ecosystem, offering faster test runs and native TypeScript support. While Jest has a bigger community, Vitest is faster and works well with modern ES modules.

Why should I switch to Vitest from Jest for Vite-based projects?

Vitest is designed for Vite-based projects and provides much faster performance by using Vite’s dev server. It supports most of Jest's APIs, making migration easy while keeping compatibility. If you're using Vite, Vitest offers better integration, faster tests, and improved ES module support compared to Jest.

How do I migrate my Jest tests to Vitest?

Migrating from Jest to Vitest is quite easy. First, uninstall Jest and install Vitest with its dependencies. Next, update the test configuration (e.g., vitest.config.js), change any jest.fn() to vi.fn(), and ensure your import statements are compatible. Most projects will need only a few code changes because Vitest supports many Jest-like APIs.

Is Vitest faster than Jest for testing?

Yes, Vitest is usually faster than Jest, especially for Vite-based projects. Vitest uses Vite's hot module replacement (HMR) and dev server, which makes tests run quicker. Also, Vitest runs tests at the same time by default, which boosts performance for large test suites.

Can Vitest be used for testing non-Vite projects like Express.js?

Yes, Vitest can be used for testing non-Vite projects, including back-end frameworks like Express.js. While Vitest is optimized for Vite, it supports Node.js environments, making it flexible for both front-end and back-end testing. You just need to configure vitest.config.js to use the Node environment and make a few small changes to your tests.

How do I set up code coverage in Vitest like I do in Jest?

Vitest has built-in code coverage reporting, just like Jest. To enable it, configure the vitest.config.js file with coverage options such as reporters (text, json, html). Then, run npm run coverage to generate a coverage report, which helps you track test coverage in your Vitest project.

Top comments (1)

TD! • Sep 9

Way better than your previous article I read. Well done

DEV Community