Minimal setup for Vite, React and Jest Integration
Tags: webdev, javascript, react, vite
Published: 2023-12-01 06:50:09

Recently, I encountered a project where I needed to add test cases, and surprisingly, configuring the project with Vite presented challenges, despite my experience with webpack. Upon completing the project, I decided to create a simple scaffold project with minimal setup to guide others on integrating unit testing in Vite.

Let's start by creating the project. If you already have a project ready then jump to Step 2


**Step 1: Create vite project
**
`1. npm create vite@latest
`

Choose your desired configuration. I choose following: -

- React
- TypeScript + SWC

Then install the dependencies by npm i

  

**Step 2: Add dependencies in project
**

```
npm i @testing-library/react
npm i jest
npm i @babel/preset-react
npm i @testing-library/jest-dom
npm i -D @babel/preset-env
npm i -D @babel/preset-typescript
npm i -D @types/jest
```

**Step 3: Configure package.JSON to add test script
**

```
 "test": "jest"
```
  in scripts

Add a Jest object at the root

```
  "jest": {
    "testEnvironment": "jsdom"
  },
```



Step 4: Add Babel configuration babel.config.cjs with following presets

```
module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ],
};

```


Step 5: Add unit test file. This file can be kept with the component itself or in separate test folder. In this unit test, we're just verifying the title of a component.'testing-library' have user interaction actions such as userEvent which comes under "@testing-library/user-event". Depending on use case, you can use it.

```
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import App from "./App.tsx";

describe("Test library check- Should always Pass", () => {
    it("should pass", function () {
        expect(true).toBe(true);
    });
});

describe("Render App component", () => {
    it("component should have title", async function () {
        render(<App />);
        expect(screen.getByText("Vite n Jest"));
    });
});

```

**Step 6: Making your test work with Styling such as csss|sass **

Configure package.json and locate jest object that we just added in previous step. Add a module mapper for styling

```
"moduleNameMapper": {
      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js"
    }
```

Create a styleMock.js file which is just a mock file as the name implies. Exporting a empty object is sufficient.
`module.exports = {};`


**Step 7: Are you using alias for importing in Vite? In that case, you need to add that alias in Jest too  **

Open package.json file and add alias in jest> moduleNameMapper
`"^@/(.*)$": "<rootDir>/src/$1"`


Finally the package.json should look similar to following

```
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "jest"
  },
  "jest": {
    "testEnvironment": "jsdom",
    "moduleNameMapper": {
      "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "^@/(.*)$": "<rootDir>/src/$1"

    }
  }
```



Hopefully, your tests will start running. If you want to review the source code please visit https://github.com/rohitjaryal/vite-n-jest
By reviewing the code commit, you can follow through step by step.