How to configure Vite with React and Vitest + eslint/tailwind/pnpm/typescript/MSW/prettier
Tags: vite, vitest, react, tutorial
Published: 2022-07-26 01:23:00

## All the stuff used
Thanks to [@laststance](https://github.com/laststance) specifically those involved in creating [this awesome template for react](https://github.com/laststance/vite-react-ts-extended). 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:
```sh
npx degit guitartsword/vitest-react-ts-extended
```

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

```sh
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:

```sh
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

```sh
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

```sh
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:
```ts
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`:
```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

```sh
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

```sh
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`

```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](https://github.com/vitejs/awesome-vite#templates) :o)