fix(vite): pass cli arguments as options to vitest

[thdk]

Context

Issue: #22354

I noticed the cli arguments were no longer working when the vite test executor was used.

Problem / solution

A recent change (00dae6a) introduced the use of vitest.parseCli. However, its return type (no longer?) is a valid options object.
The parseCli function (docs) from vitest returns an object which should first be destructured to get the proper options object:

const {
   filter,
   options,
} = parseCli(['vitest', ...argv])

Current Behavior

Cli args such as --watch or --coverage of --ui are not used when using @nx/vite test executor.

# setup
npx create-nx-workspace@latest --preset ts --ci skip nx-react-vite
cd nx-react-vite
npm i -D @nx/react
NX_ADD_PLUGINS=false npx nx g @nx/react:app my-app --bundler=vite --unitTestRunner vitest

# exits after first run, doesn't wait for new changes
npx nx test my-app --watch 
# doesn't create a coverage report
npx nx test my-app --coverage
# doesn't open the ui
npx nx test my-app --ui

Expected Behavior

# should watch for changes and rerun test when changes occur
npx nx test my-app --watch
# should create a coverage report
npx nx test my-app --coverage
# should open a ui page showing all tests
npx nx test my-app --ui

Related Issue(s)

Fixes #22354, Fixes #22392

Issue relates to #21890

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
nx-dev	⬜️ Ignored (Inspect)	Visit Preview	Apr 11, 2024 4:40pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d12f87f. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 6 targets

• nx affected --targets=e2e,e2e-ci --base=7a7cbeca44e44ff62ae3ab120bccb0850e09884c --head=d12f87fd232e413ef3a7b5ff3b355d7b6755cfc4 --parallel=1
• nx affected --targets=lint,test,build --base=7a7cbeca44e44ff62ae3ab120bccb0850e09884c --head=d12f87fd232e413ef3a7b5ff3b355d7b6755cfc4 --parallel=3
• nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte
• nx-cloud record -- nx format:check --base=7a7cbeca44e44ff62ae3ab120bccb0850e09884c --head=d12f87fd232e413ef3a7b5ff3b355d7b6755cfc4
• nx documentation --no-dte
• nx affected -t e2e-macos --parallel=1 --base=7a7cbeca44e44ff62ae3ab120bccb0850e09884c --head=d12f87fd232e413ef3a7b5ff3b355d7b6755cfc4

---

Sent with 💌 from NxCloud.

[thdk]

I have tested my changes locally using npm link for both --watch and --test-file.

Still need to look into why the new e2e test for vite doesn't pick up the changes.

[lynxwint3r]

Hey @thdk

I have tested my changes locally using npm link for both --watch and --test-file.

Still need to look into why the new e2e test for vite doesn't pick up the changes.

It looks like all the written options are now properly passed down to vitest but the option used in your test --test-file seems to not exist at all.

I've found a --test-files in the NX docs but nothing about that for vitest. Any idea on this point ?

[ryan-mcginty-alation]

Will this also enable the use of --ui again?

[thdk]

@lynxwint3r you seem to be right about --test-file not to be supported by vitest. But --test-files (plural) does work when testing my fix locally. The singular version does work for jest though.

> nx run web:test --test-file app/components/atoms/Select/Select.test.tsx

 DEV  v1.3.1 /monorepo/apps/web
 ✓ app/utils/parseProcessEnvFeatureFlags.test.ts  (4 tests) 2ms
 ✓ app/utils/request.test.ts  (4 tests) 3ms
 ✓ app/components/atoms/Select/Select.test.tsx  (1 test) 35ms
 ✓ app/components/atoms/Acceptance/Acceptance.test.tsx  (2 tests) 43ms
 ✓ app/components/atoms/Card/Card.test.tsx  (2 tests) 37ms
 ✓ app/components/organisms/FormGroup/FormGroup.test.tsx  (1 test) 16ms
 Test Files  6 passed (6)
      Tests  14 passed (14)
   Start at  21:14:17
   Duration  1.34s (transform 261ms, setup 758ms, collect 804ms, tests 136ms, environment 2.04s, prepare 392ms)
 PASS  Waiting for file changes...
       press h to show help, press q to quit

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

 >  NX   Successfully ran target test for project web (2s)
 
         With additional flags:
           --test-file=app/components/atoms/Select/Select.test.tsx

> nx run web:test --test-files app/components/atoms/Select/Select.test.tsx

DEV  v1.3.1 monorepo/apps/web
✓ app/components/atoms/Select/Select.test.tsx  (1 test) 35ms
Test Files  1 passed (1)
     Tests  1 passed (1)
  Start at  21:14:26
  Duration  618ms (transform 34ms, setup 71ms, collect 87ms, tests 35ms, environment 195ms, prepare 46ms)
PASS  Waiting for file changes...
      press h to show help, press q to quit

Unfortunately this gives the same result for the e2e test.

[DenizUgur]

Any plans to merge this PR?

[thdk]

@Coly010 I see CI now fails. Is there anything still required from my side? I can look at it to rebase by branch but don't want to force push now that you are on it as well.

Is there a reason my commits have been squashed?

I have the following commits on my local branch:

e1a988f2d chore(vite): prevent test to hang by setting CI=true
6b0c81b1e chore: create runCLIUntil wrapper function
dd521ceab chore(vite): add e2e test for vitest --coverage and --watch
14d6c3491 fix(vite): pass cli arguments as options to vitest
0731ff154 fix(vite): explicitly disable vitest watch mode when not specified

I do believe these commit message each bring value to the git history of the nx repo and in release reports.

[Coly010]

@thdk Nothing required from your side. This PR has uncovered a potential issue on our end however, which is why the CI is failing. (It passes locally, but CI is not producing logs of the failure).

We always squash commits anyway when we merge, and the commits have been included in the Long Commit Message, so they're not lost.

However, I did need to remove some changes you had made as they were not scoped to what this PR was aiming to achieve.

Thanks however for this contribution, and when it can be merged (CI gets fixed), it will be

[Coly010]

Thanks @thdk for the contribution! 🎉

[dprothero]

@Coly010 I think we now have an issue with the --changed flag.

See: https://vitest.dev/guide/cli#changed

If no value is provided, it will run tests against uncommitted changes (including staged and unstaged).

However, this change is now passing --changed true to vitest and it's interpreting the true as being a git ref, which causes the command to fail. It seems that --changed has it's own meaning when passed by itself and doesn't want the true in there.

Unfortunately, there isn't a workaround (other than not using the --changed flag) since that's the only way to tell it to run tests, that I know of, against uncommitted changes.

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.