Using vitest for unit testing components and having a dependency that uses vanilla-extract inlined.

[erandjo]

I am attempting to use vitest for unit-testing my vite application. The application depends on a design-system that uses vanilla-extract. Due to the design-system having dependencies that does not export ES modules I was forced to inline the dependencies -> server { deps { inline in vitest config and is now met with the (common) error message "Styles were unable to be assigned to a file". I have read https://vanilla-extract.style/documentation/test-environments/ and I have tried installing the vanillaExtractVite plugin even though it shouldn't be necessary. I can try to disable runtime styles given that I dont really need to test the styling; however, I am using vitest in-source testing and have been struggling with setting setupFiles. I am relatively inexperienced when it comes to bundlers. Any insights or tips would be appreciated 🙂

[erandjo]

Ok, so I kind of made it work. I still had to import the vanillaExtractPlugin. I assume the reason for this is that I am in a mono-repo and that the vitest-config is placed at the package level (and thus wont inherit from the vite-config - I am not sure about this part, it is merely a guess). I decided to abandon the idea of doing in-source testing after some helpful remarks, from the vitest discord community, that pointed out that we should avoid doing in-source testing for anything reliant on external dependencies. I assume that in-source tests runs in isolated contexts and that they are not able to access the same resources as these "normal" tests - again, im abit unclear about the details, or even if my assumptions are right; I will have to look more deeply into it. Nevertheless, I am closing the discussion because the approaches here: https://vanilla-extract.style/documentation/test-environments/ works when not doing in-source testing, which again seems to be intended for testing pure logic.

import { defineProject } from 'vitest/config';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
import { defineProject } from 'vitest/config';

export default defineProject({
	plugins: [vanillaExtractPlugin()],
	test: {
		include: ['**/*.test.{js,ts}'],
		includeSource: ['**/*.{js,ts,jsx,tsx}'],
		environment: 'happy-dom',
		setupFiles: ['./vitest.setup.ts'],
		server: {
			deps: {
				inline: ['@<library-1>', '@<library-2>],
			},
		},
	},
	define: {
		'import.meta.vitest': 'undefined',
	},
});