Vite/Vitest React Kitchen Sink Demo

[robcaldecott]

Greetings!

I have created a fully-featured React demo that shows off Vite and Vitest using an app based on one I use for training at my company (the app is a simple vehicle manager.)

I have spent some time converting this from Create React App to Vite and Vitest and thought I'd share the code as it highlights some quirks with Vitest in particular that I thought warranted a discussion. Plus I like to share and maybe others will find it useful.

You can find the source of the app here: https://github.com/robcaldecott/vite-kitchen-sink

The app showcases a lot of modern React goodies:

• 100% TypeScript
• MUI with a simple custom theme and dark mode support
• react-query for API handling
• Mock Service Worker to fake an API in the browser
• React Router 6
• Formik with MUI bindings
• MUI Lab date picker
• react-intl and corresponding babel plugin for automatic message IDs
• Custom fetch wrapper
• Storybook with interactions, MSW, dark mode and intl addons

But the relevant part is that it uses Storybook as a basis for the component unit tests via a combination of @storybook/testing-react and React Testing Library. At my company this is a very popular pattern with devs: Storybook is the core dev tool and reusing stories as your test units makes things easier to reason about.

vitest quirks and issues

whatwg-fetch
My first issue was fetch not working when running tests so I copied what CRA does and added whatwg-fetch to the project which I load via a test setup file. However. I was then greeted with the following errors:

Module /Users/robcaldecott/Projects/vite-kitchen-sink/node_modules/whatwg-fetch/fetch.js:83 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "whatwg-fetch" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

I'm not 100% sure what's going on here as the package.json for this dependency has a main and a module but it looks like the main entry points to a UMD file so maybe that's the reason? I fixed it by adding whatwg-fetch to deps.inline but it was confusing. Not necessarily a criticism of Vitest but curious.

jest-fn
Next up was jest.fn is missing which I naively thought would be covered by Vitest. I have globals: true in my config but I guess that's only for expext, it, test, etc.? I had to import { fn } from "vitest" and use that instead. Not a big deal but makes converting a large set of tests a bit more effort.

Coverage issues
The coverage report is producing some bizarre output and I think this is an actual bug. If I run all my tests I see some reports of code not being covered when it definitely is and the corresponding HTML report makes no sense. Here's one example:

That's a prop that's passed to a child component. I don't see how that code isn't executed.

Here's another weird one:

Definitely not right!

Excluding files
I also had to mess with the coverage exclude settings else some of the tests themselves ended up included in the report! Not all of them either which was odd.

I settled on this in the end:

coverage: {
  exclude: [
    ".storybook",
    "**/*.stories.tsx",
    "**/*.test.tsx",
    "src/setupMatchMedia.ts",
    "src/setupTests.ts",
  ],
},

Again, nothing that couldn't be fixed with some config but might be worth me raising an issue.

The takeaway is that imho the Vitest team have done an AMAZING job with this project. While there are some things to iron out it's so much more stable than I expected and configuration is so simple compared to jest.

I plan to add a simpler example of using Storybook for your tests to the Vitest examples in the next few days.

[sheremet-va]

jest-fn
Next up was jest.fn is missing which I naively thought would be covered by Vitest. I have globals: true in my config but I guess that's only for expext, it, test, etc.? I had to import { fn } from "vitest" and use that instead. Not a big deal but makes converting a large set of tests a bit more effort.

We don't have jest global since we are not jest :)
But we have a fully compatible global called vi (alias for global vitest). While migration is in process, you can assign vi to jest global:

global.jest = global.vi

whatwg-fetch
My first issue was fetch not working when running tests so I copied what CRA does and added whatwg-fetch to the project which I load via a test setup file. However. I was then greeted with the following errors:

Fetch is not implemented in JSDOM, but happy-dom provides pollyfil with node-fetch. I don't think we will implemented it since usually people need to mock it instead 👀 We have a simple package for that for now.

I'm not 100% sure what's going on here as the package.json for this dependency has a main and a module but it looks like the main entry points to a UMD file so maybe that's the reason? I fixed it by adding whatwg-fetch to deps.inline but it was confusing. Not necessarily a criticism of Vitest but curious.

It has a module entry, so maybe it's a bug in vitest 🤔

Coverage issues

Yeah, coverage is not great at the moment. We have a lot of issues with it right now.

The takeaway is that imho the Vitest team have done an AMAZING job with this project. While there are some things to iron out it's so much more stable than I expected and configuration is so simple compared to jest.

Thank you for your kind words!

[robcaldecott]

Thanks for the tips @sheremet-va

One thing, if I use vi.fn() I get a TS error Cannot find name 'vi'. ts(2304) : do I need to add something to my tsconfig.json?

[sheremet-va]

You need compilerOptions.type: ['vitest/global'] for global types to take effect.

[robcaldecott]

I thought I'd open a PR for Storybook testing but sadly Storybook does not support pnpm so refuses to run. This is a shame but I don't think there is a quick win here to make it work.