Switching to vitest with an existing Vue 3 project - trying to iron out issues with existing test suites

[lewishowles]

I'm trying to switch an existing project to vitest, and it looks really cool, and so much faster than Jest.

Hopefully the issues I'm having are just incorrect config, or lack of knowledge.

I've moved the project over to Vite, which seemed relatively painless, and it's up and running - and as far as I can see there are no problems there. The issue I'm having is when it comes to unit testing. Having been flat unable to get Jest running at all with Vite, despite it running fine previously, I'd given up and wanted to try vitest.

I'm having a few teething troubles in getting any existing suite to run.

1. Our project uses a number of in-house libraries, with functions imported such as

import { deepCopy } from '@libraries/ui-helpers/object';

The error I'm getting is

Directory import '/path/to/node_modules/@libraries/ui-helpers/object' is not supported resolving ES modules imported from /path/to/node_modules/@libraries/ui-testing/unit.js

I can't really change how those libraries are generated, and they're imported in all sorts of places and projects, so that seems out of the question.

That helper library is Typescript, where this project isn't really using Typescript (though I think Vue 3 is set up for it by default anyway), so I'm not sure if that could have anything to do with it. The path it's trying to import from does have an index.d.ts file.

2. If I manually change those imports for now, I'm also getting an error that window is undefined - some of our helpers use window, and while window seems to be available inside test files, it doesn't seem to be available in external files used in the project.

My vite.config.js is pretty simple:

import { defineConfig } from 'vite';
import { fileURLToPath } from 'url';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
	plugins: [vue()],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url)),
		},
	},
});

though I've also tried environment: 'jsdom' with jsdom installed.

[sheremet-va]

• environment: 'jsdom' should be inside test option in Vite config for it to take effect. Window will be available everywhere
• library needs to have index.[ts|js] file, so it can be imported, like you are trying to do

[lewishowles]

I will try jsdom again in there, hopefully that will solve that one.

Hmm I thought it might need the output changing. I'll have to have a play in the library to see how I can change its output and, if so, if that affects any other projects. The library also uses rollup to build but it just kind of takes the wheel and outputs a mishmash of files.

Thanks!