Migrating from Jest to Vitest for React Testing
Published: 2023-06-17 16:42:30

---
title: Migrating from Jest to Vitest for React Testing
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-14 20:18 +0000
---

## 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:

```shell
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:

```shell
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 :

```shell
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`:

```typescript
// 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:

```typescript
/// <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.