[@nx/vite] Vitest Browser doesn't keep the browser open

[LayZeeDK]

Current Behavior

1. The Vitest UI web app doesn't connect
2. The Vitest Browser is closed once the tests have run

Expected Behavior

1. The Vitest UI web app should connect (configured to port 3000)
2. The Vitest Browser should stay open after the tests have run

GitHub Repo

https://github.com/LayZeeDK/nx20-4-angular19-2-vitest-browser-playwright

Steps to Reproduce

Sample repo:

1. npm install
2. npm test

New workspace:

1. create-nx-workspace nx20-4-angular19-2-vitest-browser-playwright --framework=angular --app-name=angular-app --e2e-test-runner=playwright --unit-test-runner=vitest
2. Add the folllowing options to apps/angular-app/vite.config.mts

{
  test: {
    // delete environment: 'jsdom' as instructed in https://dev.to/brandontroberts/faster-testing-with-angular-and-vitest-274n
    ui: true, // open Vitest UI
    api: {
      host: 'localhost', // use IPv4
      port: 3000,
      strictPort: true,
    },
    browser: {
      provider: 'playwright',
      enabled: true,
      name: 'chromium',
      headless: !!process.env['CI'],
      api: {
        host: 'localhost', // use IPv4
        port: 3030,
        strictPort: true,
      },
    },
  }
}

1. nx test angular-app --ui

Nx Report

Node           : 20.18.3
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.8.2

nx                     : 20.4.6
@nx/js                 : 20.4.6
@nx/eslint             : 20.4.6
@nx/workspace          : 20.4.6
@nx/angular            : 20.4.6
@nx/devkit             : 20.4.6
@nx/eslint-plugin      : 20.4.6
@nx/module-federation  : 20.4.6
@nx/playwright         : 20.4.6
@nx/vite               : 20.4.6
@nx/web                : 20.4.6
@nx/webpack            : 20.4.6
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin
---------------------------------------
Community plugins:
@analogjs/vite-plugin-angular : 1.14.0
@analogjs/vitest-angular      : 1.14.0
angular-eslint                : 19.2.0

Failure Logs

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

I also tried Vite 6, Vitest 2, and Vitest 3 with Nx 20.4 and 20.5.0-rc.1. I have tried test.watch: true in vite.config.mts.

However, it works as expected when running npx vitest --watch --ui.

This non-Nx Angular CLI workspace works when Vite is configured as described in the New workspace instructions: https://github.com/lacolaco/angular-vitest-sandbox

It uses Angular 18, Analog 1.5, Vite 5.3, and Vitest 1.6. It works both with WebdriverIO and Playwright. It works with both Angular TestBed and @testing-library/angular. It is set up similar to what is described in https://dev.to/brandontroberts/faster-testing-with-angular-and-vitest-274n.

[LayZeeDK]

Cc @Coly010 @brandonroberts

[LayZeeDK]

As noted, a workaround is running npx vitest --watch --ui or npx vitest --watch --ui --project "<nx-project-name>".