Vitest doesn't work in programmatic way if the root path isn't the current working dir

[Jinjiang]

Environment

The background is I'm trying to make the Nuxt apps work in @teambit.

I tried to run Vitest via Node APIs and have found the app doesn't render properly in the tests if the current working dir is not the root path of the project.

Reproduction

https://github.com/Jinjiang/reproductions/tree/nuxtjs-vitest-20240514

pnpm install

# it works
pnpm test
# it works
pnpm test:debug:1
# it doesn't
pnpm test:debug:2

Describe the bug

First, prepare a js file ./debug/run.mjs like:

import { startVitest } from 'vitest/node';

startVitest('test', ...);

then:

• run it via node ./debug/run.mjs, it works
• run it via cd debug && node ./run.mjs, it doesn't

Additional context

No response

Logs

$ pnpm test:debug:2

> nuxt-app@ test:debug:2 /Volumes/jinjiang-portable-disk/Developer/teambit/temp/repro-nuxtjs-app-20240513
> cd debug && node test.mjs && cd ..

{
  configPath: '/Volumes/jinjiang-portable-disk/Developer/teambit/temp/repro-nuxtjs-app-20240513/vitest.config.ts',
  rootPath: '/Volumes/jinjiang-portable-disk/Developer/teambit/temp/repro-nuxtjs-app-20240513',
  include: [
    '/Volumes/jinjiang-portable-disk/Developer/teambit/temp/repro-nuxtjs-app-20240513/**/*.spec.ts'
  ]
}

 RUN  v1.6.0 /Volumes/jinjiang-portable-disk/Developer/teambit/temp/repro-nuxtjs-app-20240513/debug

stdout | createSuspenseBoundary (/Volumes/jinjiang-portable-disk/Developer/teambit/temp/repro-nuxtjs-app-20240513/node_modules/.pnpm/@vue+runtime-core@3.4.27/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1451:43)
<Suspense> is an experimental feature and its API will likely change.

stderr | ../tests/foo.nuxt.spec.ts > can also render an app
[Vue warn]: Failed to resolve component: HelloWorld
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App > 
  at <Anonymous> 
  at <Anonymous ref="VTU_COMPONENT" > 
  at <VTUROOT>

 ❯ ../tests/foo.nuxt.spec.ts (1)
   × can also render an app

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  ../tests/foo.nuxt.spec.ts > can also render an app
Error: Snapshot `can also render an app 1` mismatched

- Expected
+ Received

  "<div id="test-wrapper">
    <div>
-     <div> 123 <div>
-         <h1>Hello World</h1>
-       </div><!-- <NuxtWelcome /> -->
-       <div>
-         <h1>Hello World</h1>
-       </div>
-       <div>
-         <h1>About</h1>
-         <div>
-           <h1>Hello World</h1>
-         </div><img src="/favicon.ico"><img src="/assets/zhlint.svg"><img src="/vue.svg" style="width: 200px;">
-         <div> Counter: 3000 <button> + </button><button> - </button></div>
-         <p></p>
-       </div>
-     </div>
+     <!-- <NuxtWelcome /> -->
+     <helloworld></helloworld>
+     <!---->
    </div>
  </div>"

 ❯ ../tests/foo.nuxt.spec.ts:8:28
      6| it('can also render an app', async () => {
      7|   const component = await renderSuspended(App, { route: '/about' })
      8|   expect(component.html()).toMatchInlineSnapshot(`
       |                            ^
      9|     "<div id="test-wrapper">
     10|       <div>

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

  Snapshots  1 failed
 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  16:44:56
   Duration  733ms (transform 268ms, setup 144ms, collect 193ms, tests 77ms, environment 71ms, prepare 131ms)

 ELIFECYCLE  Command failed with exit code 1.

[dosubot]

@Jinjiang Hello there! I'm here to help you with any issues you may have. Let me know how I can assist you!

To make Nuxt apps work with @teambit and Vitest when running tests programmatically, ensuring they render properly even if the current working directory is not the root path of the project, you can use the defineVitestConfig from @nuxt/test-utils/config and set the test environment to 'nuxt'. Additionally, you can use the getVitestConfigFromNuxt function to dynamically load and configure the Nuxt environment. Here is an example configuration:

import { defineVitestConfig, getVitestConfigFromNuxt } from '@nuxt/test-utils/config'

export default defineVitestConfig(async () => {
  const nuxtConfig = await getVitestConfigFromNuxt()
  return {
    ...nuxtConfig,
    test: {
      ...nuxtConfig.test,
      environment: 'nuxt',
    },
  }
})

This configuration ensures that the Nuxt environment is properly set up for your tests, which helps in rendering the Nuxt app correctly regardless of the current working directory. The getVitestConfigFromNuxt function dynamically loads the Nuxt configuration, making it adaptable to different project structures ^[1][2].

Details

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.