DEV Community

Rohit
Rohit

Posted on

Minimal setup for Vite, React and Jest Integration

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
Enter fullscreen mode Exit fullscreen mode

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

 "test": "jest"
Enter fullscreen mode Exit fullscreen mode

in scripts

Add a Jest object at the root

  "jest": {
    "testEnvironment": "jsdom"
  },
Enter fullscreen mode Exit fullscreen mode

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"
    }]
  ],
};

Enter fullscreen mode Exit fullscreen mode

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"));
    });
});

Enter fullscreen mode Exit fullscreen mode

*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"
    }
Enter fullscreen mode Exit fullscreen mode

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"

    }
  }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
nickfane profile image
Nick Fane

Thanks for this article Rohit. It was very helpful and a lot more straight-forward than other's I've seen.

I'll just put my 2c in regarding

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

This is perfectly explained in your article, but I might suggest adding a note about some of the basic errors you might get with CSS imports without this, for instance

Image description

This was the error I dealt with before I added the mock/transform for CSS. This made me circle around the jest/babel config a bit until I realised the connection between the transform and the mock style file.

Cheers again! I am planning on writing an article on some testing practices that I think are useful, I will link your article as a source for how I got my react, vite, jest setup.