nuxt3 use vitest Execution time too long and Unable to use vitest's coverage command

[mcpanl]

Environment

• Operating System: Windows_NT
• Node Version: v18.15.0
• Nuxt Version: 3.3.3
• Nitro Version: 2.3.2
• Package Manager: yarn@1.23.0-20200615.1913
• Builder: vite

Reproduction

File: /tests/NoteTree.spec.ts

import { $fetch } from '@nuxt/test-utils'

describe('test', () => {
    it('test index', async () => {
        console.log('Begin test index')
        expect(await $fetch('/')).toMatch('Hello Nuxt!')
    })
})

File: App.vue

<template>
  <div>
    Hello Nuxt!
  </div>
</template>

File: package.json

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "test": "nuxt test --coverage",
    "testOnce": "vitest run",
    "testCoverage": "vitest run --coverage"
  },
  "dependencies": {
    "@css-render/vue3-ssr": "^0.15.12",
    "@vicons/ionicons5": "^0.12.0",
    "cheerio": "^1.0.0-rc.12",
    "fs": "0.0.2",
    "highlight.js": "^11.7.0",
    "marked": "^2.0.0",
    "path": "^0.12.7",
    "prismjs": "^1.29.0"
  },
  "devDependencies": {
    "@nuxt/test-utils": "3.3.3",
    "@types/node": "^18.15.11",
    "@types/prismjs": "^1.26.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitest/coverage-c8": "^0.29.8",
    "@vue/test-utils": "^2.3.2",
    "eslint-plugin-vitest": "^0.0.57",
    "jsdom": "^21.1.1",
    "naive-ui": "^2.34.3",
    "nuxt": "3.3.3",
    "sass": "^1.60.0",
    "vfonts": "^0.0.3",
    "vite-plugin-prismjs": "^0.0.8",
    "vitest": "^0.29.8"
  }
}

Usage: Terminal run: nuxt test

Describe the bug

Bug preview:

1. Execution time too long
2. Excessive duplicate content output from the console
3. Unable to use vitest's coverage command

Bug description:
1. Execution time too long
Usually, a simple project only tests whether a page contains a certain string, so it shouldn't take so long. I hope to optimize the test execution logic, such as in the CI/CD process where Yarn install and Yarn build are usually done in the previous steps. I hope to directly conduct real nuxt tests after this, without the need for repeated compilation

2. Excessive duplicate content output from the console
The Vue3 project can be tested using the vitest run command, and the console is very concise during the testing process. Repeated output will only output one line, but using the nuxt test command will output a lot of repetitive content on the console

3. Unable to use vitest's coverage command
The coverage command of vitest cannot be used. Vue3 projects can use the vitest run --coverage command to calculate and output coverage, but using the nuxt test command and the --coverage command also cannot output coverage

Additional context

No response

Logs

No response

[danielroe]

Would you provide a minimal reproduction? 🙏

Nuxt is performing a full build of your site in order to run the test, which is why it takes longer than you expect.We have plans to optimise this, perhaps by using a cached build or sharing builds between test suites. (cc: @antfu)

It's also why it's unlikely vitest's coverage option will give you the kind of coverage you want.

The repeat output is likely an issue with the fact that we wrap console logs when running nuxi test and we should look into it.

For basic unit tests where you do not need to fully build your Nuxt server for testing, I would recommend instead checking out https://github.com/danielroe/vitest-environment-nuxt.

[mcpanl]

@danielroe thanks, this is minimal reproduction: https://codesandbox.io/p/sandbox/compassionate-chihiro-bucuv4

please run test

I don't know why, but running Nuxt test on Codesandbox is indeed very fast, only taking about 10 seconds. However, I found that Codesandbox is using the Node16 version, and the running system is not clear about what it is. However, my development computer is Windows 10, using the Node18 version. Although the running speed is much faster, the content output from the console is still repetitive. thank you!

[Laruxo]

I had a similar issue, so decided to limit the scope of some tests and use nuxt-vitest + directly calling vitest (instead of nuxi test). This has the added benefit of having all vitest flags available (e.g. filtering).

[danielroe]

let's track in #314.