Migrating from Jest to Vitest for React Testing

Migrating from Jest to Vitest for React Testing

When it comes to testing React applications, Jest has been a popular choice for many developers. However, if you're looking for an alternative testing framework, Vitest could be a great option to explore. In this guide, we'll walk through the process of migrating from Jest to Vitest, step by step.

Step 1: Uninstall Jest

To begin the migration process, you'll need to uninstall Jest from your project. You can do this by running the following command:

npm uninstall jest

In many projects there may be additional dependencies to remove - some to watch out for

@types/jest
jest-css-modules
jest-environment-jsdom
ts-jest 

Step 2: Install Vitest

Next, install Vitest as your new testing framework. Use the following command to install Vitest:

npm i -D vitest 

Step 3: Install Dependencies for Vitest

Vitest may require additional dependencies based on your testing needs. Make sure to install any necessary third-party dependencies for Vitest. At a minimum I would recommend for coverage to install :

npm i -D @vitest/coverage-v8

Feel free to add any other testing-related dependencies required for your project.

Step 4: Remove Jest Configuration Files

Since you're migrating away from Jest, you can remove any Jest-specific configuration files, such as jest.config.js or jest.setup.js, from your project.

Step 5: Create setUpTests.ts File

Create a new file named setUpTests.ts in your project's source directory (e.g., src/setUpTests.ts). This file will serve as the setup file for Vitest. Here's an example content for setUpTests.ts:

// add Vitest functions here globally
import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import matchers from '@testing-library/jest-dom/matchers';

// Extend Vitest's expect method with methods from react-testing-library
expect.extend(matchers);

// Run cleanup after each test case (e.g., clearing jsdom)
afterEach(() => {
  cleanup();
});

Feel free to customize the setUpTests.ts file based on your specific testing requirements.

Step 6: Modify vite.config.ts

Open your vite.config.ts file (or create one if it doesn't exist) and make the following modifications:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), viteTsconfigPaths()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setUpTests.ts',
  },
});

Ensure that you have the necessary imports for the plugins used in the vite.config.ts file.

Step 7: Update Unit Test Code

In Vitest, the API is similar to Jest, so updating your unit test code should be straightforward. Replace references to Jest functions with the corresponding Vitest functions. For example, replace jest.fn() with vi.fn().

Make the necessary changes to your unit test

Conclusion

Migrating from Jest to Vitest for your React testing needs is a straightforward process that allows you to explore a different testing framework with its own set of features and advantages. By following the steps outlined in this guide, you can smoothly transition your tests to Vitest and take advantage of its capabilities.

It's important to note that Vitest, unlike Jest, does not provide built-in type checking for your test code. Therefore, it's crucial to ensure proper type annotations and type checking in your codebase separately. Be diligent in maintaining the correctness of your tests by ensuring that they align with the expected types of the data being tested.

One thing to be aware of when using Vitest is that tests may still pass even when incorrect or mismatched data types are used. Vitest does not perform strict type checks by default, so it's essential to exercise caution and validate your test inputs and assertions manually.

Overall, migrating from Jest to Vitest opens up new possibilities and testing approaches for your React applications. Be sure to explore the Vitest documentation and community resources to fully leverage its capabilities and take your testing to the next level.