DEV Community

Isaias Valle
Isaias Valle

Posted on

How to configure Vite with React and Vitest + eslint/tailwind/pnpm/typescript/MSW/prettier

#vite #vitest #react #tutorial

All the stuff used

Thanks to @laststance specifically those involved in creating this awesome template for react. Without further ado, the "stuff" that matters to me:

  • Vite
  • Vitest
  • React
  • Typescript
  • React Testing Library
  • Eslint
  • Prettier
  • MSW
  • PNPM

The stuff that is cool but is not so important to me right now:

  • tailwindcss
  • CI (GitHub actions)

And the stuff that I will replace for a different technology

  • Replace jest for vitest
  • Replace yarn for pnpm

Don't want to follow along?

Just clone this repository and you got all the features mentioned above - Jest + Vitest - yarn + pnpm:

https://github.com/guitartsword/vitest-react-ts-extended

Or simply do:

npx degit guitartsword/vitest-react-ts-extended
Enter fullscreen mode Exit fullscreen mode

Getting started

Use the awesome template from lastance to avoid all the hassle of configuring everything needed

npx degit laststance/vite-react-ts-extended <folder>
cd <folder>
Enter fullscreen mode Exit fullscreen mode

Now you are ready to start, although there are some things that we need to change and delete.
This structure uses jest instead of vitest, but first of all:

git init
git add .
git commit -m "Initial commit"
Enter fullscreen mode Exit fullscreen mode

Remove Jest and Install Vitest

Now that we can track all the changes we are about to do, let's start removing/renaming files

rm yarn.lock
mv jest vitest
find ./vitest -name *Transform.js -delete
Enter fullscreen mode Exit fullscreen mode

That's it! Now is time to install vitest and edit some files

pnpm i
pnpm i -D vitest
pnpm vitest # to test installation (all tests will fail, but vitest should run)
Enter fullscreen mode Exit fullscreen mode

Once we have vitest, let's configure it, create a file vitest.config.ts and add the following code:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  esbuild: {
    // This is to not import React (similar to create react app)
    jsxInject: `
import React from 'react';
// const jest = vi; // Uncomment this line if you are migrating from jest to vitest
`,
  },
  test: {
    // Do not process css files (is slow)
    css: false,
    environment: 'jsdom',
    // This is to not import test, it, expect, vi (instead of jest). Similar to how jest works
    globals: true,
    setupFiles: ['./vitest/setupTests.ts'],
  },
})
Enter fullscreen mode Exit fullscreen mode

If you run pnpm vitest you will have an error. jest is not defined. To fix this,
we have two solutions:

  • Uncomment the // const jest = vi; in the jsxInject configured in the vitest.config.ts
  • Rename jest to vi (since it is a new project, this is the best case for us) Just edit this file src/hooks/useDidUpdateEffect.test.ts Line 6

Now if you run again pnpm vitest, you will have another error React has already been declared, just remove it from everywhere
where this is been used or remove the import React from 'react'; in the jsxInject.

Files:

src\main.tsx
src\App.tsx
src\App.test.tsx
Enter fullscreen mode Exit fullscreen mode

Now run pnpm vitest and we did it! We configured it!
But we still have something else we need to configure: tsconfig.json, add the following to your tsconfig.json:

{
  "compilerOptions": {
    "types": ["vitest/globals"] // Add this line
  },
  "include": ["./src", "./vitest/setupTests.ts"] // Add setupTests.ts to includes
}
Enter fullscreen mode Exit fullscreen mode

Now let's check if the app runs

pnpm dev
Enter fullscreen mode Exit fullscreen mode

Good, it should be running. There are still some last things to do.

Dependency Cleanup 

pnpm uninstall @types/jest esbuild-jest jest jest-environment-jsdom jest-watch-typeahead
pnpm uninstall node-notifier # optional, seems it isn't used
pnpm install -D jsdom @vitest/ui
Enter fullscreen mode Exit fullscreen mode

I noticed that vite was auto-updated to version 3 and msw doesn't work as expected, so let's fix that

rm mockServiceWorker.js
pnpm msw init ./public
Enter fullscreen mode Exit fullscreen mode

Then just press enter and let msw configure everything. Once that is done, let's update our package.json

{
  "scripts": {
    "test": "vitest --run",
    "test:watch": "vitest",
    "test:ui": "vitest --ui", // you will love this (if you test your code 🤭)
  }
}
Enter fullscreen mode Exit fullscreen mode

Summary

So there we go, we finished our Vitest configuration, updated the msw configuration, and removed all jest dependencies and related code configuration. And since we are using @laststance's template, we got configured tailwind, msw, eslint, prettier, and github CI.

Hope this article helped you configure your vitest + react (there is no vitest + react in the community vite templates :o)

Top comments (0)