Debugging with @stencil/vitest

[angelo-v]

Hi I am having a tough time getting debugging during tests to work. I wonder whether it should work out of the box and I am doing something wrong? I tried with vscode and Intellij. Breakpoints stop at test code but not in the component.

I thought it might be related to the dist output being used so I tried with explicit sourceMap: true but this is not helping. I also tried the stencilVitestPlugin. I am trying all this on a freshly initialized stencil project with the my-component.tsx so it should not be very special... But I also wondered that the freshly initialized stencil projects differs in config from what is explained in the docs, so I am still confused what the recommended way to setup tests is and with what configuration I can debugging expect to work or not.

[angelo-v]

Source maps seem to be omitted by the plugin, I filed an issue for that: stenciljs/vitest#74

[johnjenkins]

Hey @angelo-v !
Makes sense re the plugin - easy fix.
Be good if you could raise an issue with what you mean regarding the dist output. I have not experienced issues debugging I think

[angelo-v]

Thanks for the quick reply! So what testing config are you using that works?

In the docs the proposed config is:

{
  test: {
          name: 'spec',
          include: ['src/**/*.spec.{ts,tsx}'],
          environment: 'stencil',
          setupFiles: ['./vitest-setup.ts'],
  },
}

with a vitest-setup.ts of

// Load Stencil components.
// Adjust according to your build output of choice
await import('./dist/test-components/test-components.esm.js');

export {};

as you can see the import points to dist, thats what I meant, so this will also only be working with source maps.

Generating a new stencil project with npm init stencil generates a different vitest-setup.ts:

import { defineCustomElements } from "./loader";

defineCustomElements();

Not sure if it makes a difference in practices, as the "./loader" also loads from dist effectifly if I understand it correctly.

And it is only initially only set up for browser based tests using the playwright provider. What the docs call spec tests is not set up at all. I added this manually but I did not find any configuration where I could debug.

[angelo-v]

Ok, I got something working. I needed to add sourceMap: true, to stencil.config.ts AND then run stencil-test --prod once for the sourcemap to actually getting build. Only after that the debug run in the IDE works and holds at the breakpoints. But it probably also means that the IDE run does not build and create the source map and might work with an outdated state.

[angelo-v]

Confirmed: The IntelliJ run configuration runs vitest directly not going through stencil-test and therefore not doing any build of code or source map. If it was built before it works, but it will not pick up any changes until stencil-test has been run again. Using stencilVitestPlugin using vitest directly works, but due to stenciljs/vitest#74 it does not create any source map and debugging does not work

[johnjenkins]

oh I see what you mean :)
Yes - that's the reason for the stencil-test - to keep your built outputs in-sync with tests.
So if you want to test in your IDE against a built asset - either run stencil build --watch or stencil-test --watch

Regarding the setup - as it mentions in the docs - you'll need to adjust it depending for what your build.

e.g. default --dev you'll need import "./dist/NAMESPACE/NAMESPACE.js" otherwise you'll need buildDist in your stencil.config or run stencil-test --watch --prod