To fix the error when adding ‘jsdom’ to ‘vite.config.ts’, you need to add references to specific TypeScript declaration files at the top of your ‘vite.config.ts’ file:
These references are necessary for type checking the ‘vite.config.ts’ file and resolving the error related to the ‘test’ property.
Here’s a breakdown of what each reference does:
/// : This reference includes type declarations specific to Vitest, the testing framework integrated with Vite. It provides type information for the ‘test’ property and its options, including ‘environment’.
/// : This reference includes type declarations for the Vite client-side API. It provides type information for the ‘plugins’ property and its options, which are used to configure plugins for Vite.
Q&A
How to resolve error when adding ‘jsdom’ to vite.config.ts?
—
Add triple-slash references to ‘vitest’ and ‘vite/client’ at the top of vite.config.ts.
Video Explanation:
The following video, titled "Setting up vite, React, TypeScript, eslint, prettier, vitest, testing ...", provides additional insights and in-depth exploration related to the topics discussed in this post.
In this video I show how to setup a react app with vite, typescript, eslint, prettier, vitest, testing-library and react-router.
