Multiple workspaces

Multiple Workspaces

Our current Vitest configuration runs all tests in Browser Mode. This isn't ideal when you need to run different types of tests in the same project - like unit and integration tests running in a Node.js environment alongside browser-based component tests.

You can fix this by introducing different workspaces for different types of tests. In fact, I think this is just the right task for you...

👨‍💼 In this one, you will expand the Vitest configuration to support running multiple types of tests in the same project. This will be a multi-step process to make sure you have Vitest and TypeScript configured correctly for your tests.

🐨 First, update

vite.config.ts

to list multiple workspaces. Define one for unit tests and another for component tests.

🐨 Next, rename

tsconfig.test.json

to tsconfig.test.browser.json. This TypeScript configuration will only apply to the component tests now. Update its include setting to target **/*.browser.test.ts* files:

{
	"include": ["vitest.browser.setup.ts", "**/*.test.ts"],
	"include": ["vitest.browser.setup.ts", "**/*.browser.test.ts*"]
}

🐨 To have proper type-checking in unit tests, create a new

tsconfig.test.unit.json

file and add the necessary properties for unit tests. You can use this as an example:

{
	"extends": "./tsconfig.base.json",
	"include": ["src/**/*.test.ts*"],
	"exclude": ["src/**/*.browser.test.ts*"],
	"compilerOptions": {
		"types": ["node", "vitest/globals"]
	}
}

🐨 You might've noticed that this config relies on @types/node to expose Node.js type in unit tests, but that dependency is missing! Install @types/node as a dev dependency to fix that.

🐨 For TypeScript to pick up all of these configs, update

tsconfig.json

to include the newly added configurations in references:

{
	"files": [],
	"references": [
		{ "path": "./tsconfig.app.json" },
		{ "path": "./tsconfig.node.json" },
		{ "path": "./tsconfig.test.json" },
		{ "path": "./tsconfig.test.unit.json" },
		{ "path": "./tsconfig.test.browser.json" }
	]
}

🐨 Finally, rename the existing file-preview.test.tsx component test to file-preview.browser.test.tsx to be included in the correct Vitest workspace.

See you on the other side once you're done to go through each step in more detail.

02. Vitest Browser Mode/05. Multiple workspaces (💪 problem)

Multiple workspaces