[Vite + React + TS + Jest] is it any intention to make vite testable?

[SMysakowski]

Clear and concise description of the problem

I started a new project with Vite. Everything worked fine till i had to implement environment variables. I made it with documentation using import.meta and I noticed that all my tests associated with place where I used this syntax were broken.

I have stack:

• React 17
• TypeScript 4.5.2
• jest 27
• RTL
• msw
• Cypress

I tried a lot of solution from SO (like implement ts-jest, transformers in jest etc.) and even closed(why?) issues in Vite but it didn't work. I found a temporary workaround doing this:

To be able run application i had to define process.env in config. Without that i had blank screen. I also had to implement dotenv to see envs from files. Without that i saw only envs passed directly in package.json.

// vite.config.ts
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
	define: {
		'process.env': JSON.stringify(process.env)
	}
});

After that i had to read variable in old way to be able run tests. Without that jest cried about import.meta syntax.

export const baseURL = process.env.VITE_API_URL

Finally I had to pass envs directly to Cypress configuration in plugins using process.env and dotenv.

require('dotenv').config();

module.exports = (on, config) => ({
	...config,
	env: {
		...config.env,
		CYPRESS_USER_NAME: process.env.CYPRESS_USER_NAME,
		CYPRESS_USER_PASSWORD: process.env.CYPRESS_USER_PASSWORD,
		CYPRESS_BASE_URL: process.env.CYPRESS_BASE_URL
	}
});

For now it works but I don't know what is the cost of this solution.

Suggested solution

Maybe building some preset for jest will be solution. Are there any plans for this?

Alternative

Currently there is no place in documention describing this problem or workaround. Perhaps, while there is no solution, it is worth describing the best workaround for this case.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[bluwy]

See #1955. Or you can use Vitest, a great alternative to Jest.

[Niputi]

jest preset https://github.com/sodatea/vite-jest for vite if you really dont wanna use vitest

[SMysakowski]

jest preset https://github.com/sodatea/vite-jest for vite if you really dont wanna use vitest

I tried vite-jest and i got errors in setupTests in import rtl jest-dom or with setting basic MSW configuration

[Niputi]

then leave a issue at the repo or/and try out vitest which have much better integration with vite

[SMysakowski]

then leave a issue at the repo or/and try out vitest which have much better integration with vite

Sure, thanks for answer! ;)