Nuxt 3 project has a vitest and a playwright testing library to test. But running the vitest script also runs on the playwright test files

Question

I have a Nuxt 3 + VueJS 3 project. My package.json is as below:

{
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "prepare": "husky install",
    "lint": "eslint .",
    "fix": "eslint . --fix",
    "test": "vitest",
    "coverage": "vitest run --coverage",
    "test-ct": "playwright test -c playwright-ct.config.ts"
  },
  "devDependencies": {
  ...
  ...
  }
}

I am using 2 testing libraries for my project, vitest and the currently experimental playwright-component-testing.

I have some test files that uses only vitest and some test files that only uses playwright component testing.

When I run the command npm run test the vitest tests pass, but the playwright tests fail. And when I run the command npm run test-ct it does not run any test and gives an error for the vitest test file. However, if I don't have any test files that reference the vitest then all my playwright tests pass.

QUESTION: How can I configure the testing in a way that my vitest command checks for only the vitest test files and the playwright-component-testing checks only for playwright test files and both testing can be done one after the other by using only one command?

Or please can anyone suggest a better approach to this issue.

Answer 1

I think you probably need to set what paths/tests are going to be run in both the vitest config and playwright configs.

Vitest by default will run the following: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']

So in the top of your playwright config, depending on your test folder structure, you could have something like:

testDir: 'tests/pw/',
testIgnore: ['tests/vitest/**'],

And then something similar in vitest to exclude the playwright tests.

test: {
  exclude: ['tests/pw/*'],
},