@nx/vite:test does not output anything to console after upgrade to Nx 17.2.5 with vitest 1.04

[PowerSupply]

Current Behavior

After migration from Nx 17.0.2 with vitest 0.32.4 to Nx 17.2.5 with vitest 1.0.4 console output is empty when running tests with a target using @nx/vite:test as executor.

Expected Behavior

@nx/vite:test executor should output test result to terminal like before

GitHub Repo

No response

Steps to Reproduce

1. Run a target with @nx/vite:test as executor and make sure to have tests in the project.

Nx Report

Node   : 18.15.0
   OS     : darwin-arm64
   npm    : 9.5.0
   
   nx                 : v17.2.5
   @nx/js             : v17.2.5
   @nx/jest           : v17.2.5
   @nx/linter         : v17.2.5
   @nx/eslint         : v17.2.5
   @nx/workspace      : v17.2.5
   @nx/angular        : v17.2.5
   @nx/cypress        : v17.2.5
   @nx/devkit         : v17.2.5
   @nx/eslint-plugin  : v17.2.5
   @nx/plugin         : v17.2.5
   @nrwl/tao          : v17.2.5
   @nx/vite           : v17.2.5
   @nx/web            : v17.2.5
   @nx/webpack        : v17.2.5
   typescript         : 5.1.6
   ---------------------------------------

Failure Logs

No response

Package Manager Version

No response

Operating System

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

Additional Information

Versions in package.json:

"@nx/vite": "17.2.5",
"@vitest/coverage-v8": "1.0.4",
"@vitest/ui": "1.0.4",
"vite": "5.0.9",
"vite-plugin-eslint": "1.8.1",
"vite-tsconfig-paths": "4.2.0",
"vitest": "1.0.4"

Example vite config (unchanged since before migration):

/// <reference types="vitest" />
import { defineConfig } from 'vite';

import viteTsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    cacheDir: '../../../node_modules/.vite/mint-assets',

    plugins: [
        viteTsConfigPaths({
            root: '../../../',
        }),
    ],

    // Uncomment this if you are using workers.
    // worker: {
    //  plugins: [
    //    viteTsConfigPaths({
    //      root: '../../../',
    //    }),
    //  ],
    // },

    test: {
        globals: true,
        cache: {
            dir: '../../../node_modules/.vitest',
        },
        environment: 'jsdom',
        include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    },
});

[ekatioz]

I think this is is related to the "Update vite config" Migration /migrations/update-17-2-0/update-vite-config. As it is modifying only the vite config in apps, but not in libs.

Among other things, it adds reporters: ["default"] to test. The lack of this causes this line seems to cause the problem.

Applying the changes to the lib's vite configs by hand re-added to test reports in the output for me.

[Maxim-Mazurok]

I have centrally managed base config:
/vite-stuff.ts:

import { fileURLToPath } from "node:url";
import viteTsConfigPaths from "vite-tsconfig-paths";
import { UserConfig } from "vitest/config";
// import { pathToResources } from "@nx/nx-utils"; // TODO: figure out how to re-arrange imports
//@ts-expect-error doesn't matter, seems to work fine
const pathToResources = new URL("resources/", import.meta.url);

interface MyUserConfig extends UserConfig {
  plugins: Required<UserConfig["plugins"]>;
  test: Required<
    Pick<
      Exclude<Required<UserConfig["test"]>, undefined>,
      "globals" | "restoreMocks" | "reporters"
    > & {
      setupFiles: Exclude<
        Pick<
          Exclude<Required<UserConfig["test"]>, undefined>,
          "setupFiles"
        >["setupFiles"],
        string
      >;
    }
  >;
}

export const myDefaultUserConfig: MyUserConfig = {
  plugins: [viteTsConfigPaths()],
  test: {
    globals: true,
    setupFiles: [
      fileURLToPath(new URL("setupFiles/toEqual.ts", pathToResources)), // requires server.fs.strict to be false to work
    ],
    restoreMocks: false, // TODO: enable this, but beware of issues with vi.mock tho (TypeError: Class constructor GoogleSheetsDownloader cannot be invoked without 'new')
    reporters: ["default"],
  },
  server: {
    fs: {
      strict: false, // this will allow to load setup file from resources
    },
  },
};

And then use it like so:
/packages/something/vite.config.ts:

import { defineConfig } from "vite";
import merge from "ts-deepmerge";
import viteTsConfigPaths from "vite-tsconfig-paths";
// eslint-disable-next-line @nx/enforce-module-boundaries
import { myDefaultUserConfig } from "../../vite-stuff";

const userConfig = { ...myDefaultUserConfig };
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
userConfig.test.setupFiles.push("src/setupFiles/msw.ts");

export default defineConfig(
  merge(userConfig, {
    cacheDir: "../../node_modules/.vite/something",

    plugins: [
      viteTsConfigPaths({
        root: "../../",
      }),
    ],

    test: {
      cache: {
        dir: "../../node_modules/.vitest",
      },
      environment: "node",
      include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
    },
  }),
);

So the migration failed for me, but as you can see above I just added reporters: ["default"] to my single shared config and it seems to work, thanks for sharing.

[PowerSupply]

Indeed adding reporters: ["default"] was the fix!

Thanks for all the helpful replies!

Happy holidays and a happy new year!

[macdonaldr93]

Thanks everyone for logging this issue. Just curious why this output is the default behaviour now? I wouldn't expect this as the default coming into NX. Could we set a smarter default?

[sebastianhaberey]

@PowerSupply I don't mean to hijack the thread, just a quick question: am I reading this right that you are running Angular / Nx / Vitest together without @analogjs dependencies? Could you link any information on how to achieve this?

[github-actions]

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.