Minimal setup for Vite, React and Jest Integration

Roej — Fri, 01 Dec 2023 06:50:09 +0000

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.

DEV Community: Roej

Minimal setup for Vite, React and Jest Integration