Improve vitest doc

[VictoriqueMoe]

I wrote a post here: https://x.com/VictoriqueM/status/1772221942868615380?s=20

Basically, when using unplugin-swc to bundle vitest, it made (on esm) debugging impossible, it seems that for some reason, no matter how hard i tried (supplying swc settings directly or inherit from tsconfig). sourcemaps where not emited correctly, my breakpoint and debugger was all over the place.

after much trial and error trying to find an ESbuild compatible bundler for decorator metadata, i found that using @rollup/plugin-typescript worked perfectly and now i can acctually debug code.

If anyone is having issues using vitest on ESM with the debugger. do the following:

npm install @rollup/plugin-typescript --save-dev

// vitest.config.ts
import { configDefaults, defineConfig } from "vitest/config";
import typescript from "@rollup/plugin-typescript";

export default defineConfig({
    test: {
        globals: true,
        root: "./",
        exclude: [...configDefaults.exclude, "node_modules/*"],
    },
    plugins: [typescript()],
    esbuild: false,
});

Maybe the docs should be updated to reflect this. just an idea

[nakedmcse]

This solves a long standing issue for us with being able to effectively test.

[Romakita]

You should not hesitate to open topics for discussion in these cases. Additionally, I only added vitest support a week or two ago :)

[Romakita]

@VictoriqueMoe Thanks a lot for the feedback.

It seems to be strange you have an issue with unplugin-swc while it's the recommended plugin by Nest.js here: https://docs.nestjs.com/recipes/swc#vitest

I just tested a fresh project a with ESM stack and it seems to works as expected:

It could be interesting to investigate @VictoriqueMoe. Have you a small repository to reproduce that ?

[VictoriqueMoe]

I saw that too, but no matter what i put in the plugin config, it doesn't seem to effect. the plugin seems to inherit from tsconfig, but not swc itself. no sure why, it's weird. I can prove this by basically setting crap in the swc plugin and everything still works, in fact, you don't even need type: "es6"

Yea, It would be nice to have both work i agree!

I tried this:

import swc from "unplugin-swc";
import { defineConfig } from "vitest/config";

export default defineConfig({
    test: {
        globals: true,
        root: "./",
    },
    plugins: [
        swc.vite({
            minify: false,
            sourceMaps: true,
            jsc: {
                minify: {},
            },
            module: {
                type: "es6",
            },
        }),
    ],
});

but it didn't do anything

[Romakita]

Good news. This configuration seems to works as expected:

import swc from "unplugin-swc";
import { defineConfig } from "vitest/config";

export default defineConfig({
    test: {
        globals: true,
        root: "./",
    },
    plugins: [
        swc.vite({
            sourceMaps: true,
            jsc: {
                minify: {
                    sourceMap: true,
                    mangle: false,
                    compress: false,
                    keep_classnames: true,
                    keep_fnames: true,
                },
            },
            module: {
                type: "es6",
            },
        }),
    ],
});

[Romakita]

I let you check ;)

[Romakita]

If it doesn't works, I suggest your to rename the .swcrc to .swcrc.prod and change the build command:

{
    "build": "npm run barrels && node ./buildScripts/cleanDist.mjs && swc src -d dist --config-file .swcrc.prod --copy-files && node ./buildScripts/moveFiles.mjs",
}

See you :)

[VictoriqueMoe]

Good news. This configuration seems to works as expected:

import swc from "unplugin-swc";
import { defineConfig } from "vitest/config";

export default defineConfig({
    test: {
        globals: true,
        root: "./",
    },
    plugins: [
        swc.vite({
            sourceMaps: true,
            jsc: {
                minify: {
                    sourceMap: true,
                    mangle: false,
                    compress: false,
                    keep_classnames: true,
                    keep_fnames: true,
                },
            },
            module: {
                type: "es6",
            },
        }),
    ],
});

This did not work, it made it slightly better, but the debug was still messed up for fileCleaner.processFiles.

i changed my config to

import swc from "unplugin-swc";
import { configDefaults, defineConfig } from "vitest/config";

export default defineConfig({
    test: {
        globals: true,
        root: "./",
        exclude: [...configDefaults.exclude, "node_modules/*", "src/__test__"],
    },
    plugins: [
        swc.vite({
            module: {
                type: "es6",
            },
        }),
    ],
});

and did that you suggested by renaming my build command and now it works fine. so it was my .swc that for some reason, the plugin was not overriding correctly, so renaming that works now.