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

Isaias Valle — Tue, 26 Jul 2022 01:23:00 +0000

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

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>

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"

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

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)

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'],
  },
})

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

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
}

Now let's check if the app runs

pnpm dev

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

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

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 🤭)
  }
}

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)