Setting `test-setupFiles` to `vite.config.ts` in `@nx/react-library` causes a test failure.

[jglee96]

Current Behavior

When i test @nx/react-library project, it fails with error(Error: Failed to load url ... {test setupFiles}. Does the file exist?).

Expected Behavior

I expect when i test "@nx/react-library" project, run test case correctly.

GitHub Repo

https://github.com/jglee96/react-monorepo

Steps to Reproduce

1. run npx nx run react-component:test
2. It will show the failure log
3. comment react-component > vite.config.ts > test > setupFiles

test: {
...
-  setupFiles: ["../../test/setup.ts"]
+ // setupFiles: ["../../test/setup.ts"]
...
}

4. run npx nx run react-component:test
5. It won't show the failure log

Nx Report

Node   : 18.17.0
   OS     : linux-x64
   npm    : 9.6.7
   
   nx                 : 17.2.8
   @nx/js             : 17.2.8
   @nx/linter         : 17.2.8
   @nx/eslint         : 17.2.8
   @nx/workspace      : 17.2.8
   @nx/cypress        : 17.2.8
   @nx/devkit         : 17.2.8
   @nx/eslint-plugin  : 17.2.8
   @nx/react          : 17.2.8
   @nrwl/tao          : 17.2.8
   @nx/vite           : 17.2.8
   @nx/web            : 17.2.8
   typescript         : 5.2.2

Failure Logs

> nx run react-component:test

 DEV  v0.34.6 {workspace}/ui/react-component
 ❯ src/lib/react-component.spec.tsx  (0 test)
⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯
 FAIL  src/lib/react-component.spec.tsx [ src/lib/react-component.spec.tsx ]
Error: Failed to load url {workspace}/test/setup.ts (resolved id: {workspace}/test/setup.ts). Does the file exist?
 ❯ loadAndTransform ../../node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:49731:21
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
 Test Files  1 failed (1)
      Tests  no tests
   Start at  20:06:42
   Duration  666ms (transform 38ms, setup 0ms, collect 0ms, tests 0ms, environment 183ms, prepare 106ms)
 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target test for project react-component (2s)
 
    ✖    1/1 failed
    ✔    0/1 succeeded [0 read from cache]

Package Manager Version

No response

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [X] Other (Please specify)

Additional Information

Operating System: Windows 11, WSL2 (Ubuntu-20.04)

[omarkhatibco]

I have the same setup where I test my packages with vitest, since upgrading to 17.2.8, everything is failing.

I tried with disabling even the setupFile option, I even get another message that is some how related:

TypeError [ERR_INVALID_FILE_URL_HOST]: File URL host must be "localhost" or empty on darwin
    at getPathFromURLPosix (node:internal/url:1371:11)
    at fileURLToPath (node:internal/url:1394:50)
    at getPackageScopeConfig (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:682:7)
    at packageResolve (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:1845:25)
    at moduleResolve (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:1973:20)
    at _tryModuleResolve (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2041:12)
    at _resolve (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2078:16)
    at resolveSync (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2112:10)
    at resolvePathSync (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/mlly/dist/index.mjs:2118:24)
    at _resolve (file:///Users/omarkhatib/Documents/GitHub/cfa/node_modules/.pnpm/[email protected]/node_modules/local-pkg/dist/index.mjs:288:22) {
  code: 'ERR_INVALID_FILE_URL_HOST'
}
 MISSING DEPENDENCY  Cannot find dependency '@vitest/ui'

note: @vitest/ui is already installed but some how it complain about it even it loads the UI

something is changed between nx versions that caused this error.

[miketheodorou]

I'm running into a similar issue. When adding the setupFiles option and attempting to import the global setup file outside the library at the root level, it fails with

Error: Failed to load url /Users/mike.theodorou/<project>/vitest-setup.tsx (resolved id: /Users/mike.theodorou/<project>/vitest-setup.tsx). Does the file exist?
 ❯ loadAndTransform ../../node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:49731:21

If I include a local vitest-setup.tsx file inside the lib, I can import that no problem. It seems that traversing up the file tree is what breaks the import.

[ekatioz]

I tried to dig deeper in this problem.

When using vitest@^0 and a matching executor like from @nx/[email protected] the files listed in the setupFiles does't even get to vite plugins to handle their resolving. They seem just to be resolved somewhere before vitest is started.

When using vitest@1 and newer versions of the executor the setupFiles start showing up in the load/transform/config handlers of the vite plugins with rather strange paths. Like the one @miketheodorou posted here. If you use something like: "setupFiles": ["@my-repo/vitest-setup"] it will result in the path C:/Users/.../my-repo/libs/my-lib/@my-repo/vitest-setup which is clearly not resolvable by nxViteTsPaths.

This behavior is observable even in vitest@^0 when executing vitest via npx or the nx:run-commands executor.

Separating this issue from nx I could see, that using pure vitest (v0 and v1) with tests.alias config results in the same behavior. Vitest is not able to resolve a string to a file in setupFiles that is something else then a relative path. Yet using a relative path to a file just containing an import using the aliased path works.

Seeing this somehow working in the older versions of nx leads me to suspect that someone handled this behavior of vitest within the nx world. I couldn't find it thou...

Maybe someone else has an idea based on my findings. 😅

[ETFairfax]

Any news on this? I'm experiencing the same issue.

I've setupFiles: ['../../test/jest-setup.ts'] in a component library and running npx nx run components:test results in the same failure.

However, I've similar setup in my react application and npx nx run my-appt:test works fine 🤷

[rads92stx]

I'm facing the same issue after packages upgrade.

[miketheodorou]

Still having problems with this. Has anyone figured out a solution?

[Coly010]

Hi! Unfortunately this is a limitation from vitest itself.

It working before with Nx was actually incorrect behaviour which has been resolved, and while it may seem like a regression, Nx is now more closely aligned with the underlying tools that are being used. Therefore, as there is a limitation here from vitest itself, this limitation is propagated through.

An issue should be raised on the vitest repo: https://github.com/vitest-dev/vitest

[unrealsolver]

This is not vitest, this is vite. Specifically server.fs.strict or server.fs.allow settings: see here: https://github.com/vitest-dev/vitest/issues/5723#issuecomment-2110805085

@miketheodorou , the solution is basically to set server.fs.strict vite setting to false , or by adding vitest.setup.ts to fs.allow

[jglee96]

This is not vitest, this is vite. Specifically server.fs.strict or server.fs.allow settings: see here: vitest-dev/vitest#5723 (comment)

@miketheodorou , the solution is basically to set server.fs.strict vite setting to false , or by adding vitest.setup.ts to fs.allow

works to me.

export default defineConfig({
  // ... something
  server: {
    fs: {
      allow: [searchForWorkspaceRoot(process.cwd()), "/test/setup.ts"],
    }
  }
})

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.