Vitest and Playwright Together

Preventing Vitest trying to run Playwright tests

If you have both Vitest and Playwright tests in your project, you might run into a problem: Vitest will try to run the Playwright tests which causes errors.

By default, Vitest will try to run any file that ends with .test.js or .spec.js. This means it will try to run our Playwright tests too, which won’t work.

We can tell Vitest to exclude the Playwright tests folder in vitest.config.js:

	import { defineConfig } from "vite";
	
	export default defineConfig({
	  test: {
	    exclude: ['**/node_modules/**', '**/tests/**']
	  },
	});

This assumes only the Playwright tests are in the tests folder. If we have both Vitest tests and Playwright tests in the tests folder, like for example:

	tests/
	  e2e/
	  unit/

Then we just need to amend the exclusion folder:

	exclude: ['**/node_modules/**', '**/tests/e2e/**']

Adding an npm script for Playwright

Instead of running npx playwright test in the terminal each time, we can add a script in package.json:

	"scripts": {
	    "test:unit": "vitest",
	    "test:e2e": "npx playwright test --ui"
	  },

We have added :unit to our Vitest script because we now have test:e2e for our Playwright script.

We’re using test:unit and test:e2e as our script names, but you can name these whatever makes sense to you. For example, these would work just as well:

	"scripts": {
	  "vitest": "vitest",
	  "playwright": "npx playwright test --ui"
	}

We can also use any Playwright flags or options in our scripts. For example:

	"scripts": {
	  "unit": "vitest",
	  "e2e": "npx playwright test",           // Run tests normally
	  "e2e:ui": "npx playwright test --ui",   // Run with UI mode
	  "e2e:headed": "npx playwright test --headed",  // Show the browser while testing
	  "e2e:debug": "npx playwright test --debug"     // Run in debug mode
	}

Remember: whatever names you choose, you’ll run them with npm run followed by the script name, like:

• npm run e2e
• npm run e2e:ui
• npm run e2e:headed

What We Learned

In this lesson, we:

• Learned how to stop Vitest from trying to run Playwright tests
• Made shortcuts (npm scripts) to run our tests more easily