search

vitest-dev / vitest

Next generation testing framework powered by Vite.
https://vitest.dev
MIT License
12.63k stars 1.13k forks source link

Debugger in vs-code does not stop at breakpoint but elsewhere #5380

Open bonham opened 6 months ago

bonham commented 6 months ago

Describe the bug

In vanilla project with vue3 + vitest + @testing-library/vue + node 18.18.2 or 20.11.1, setting and debugging breakpoints in vs-code on windows 11 does not work as expected. Debugger stops at wrong location. I am using vue single file components ( aka .vue files )

Seems to be transpiling and/or sourcemap issue.

The issue disappears when removing section in .vue file

Reproduction

  1. Create any vanilla vue project with simple single file component which contains all sections: template / script / style
  2. Write a test with @testing-library/vue which is testing this component
  3. Set a breakpoint within a .vue file
  4. Run the test and watch where debugger stops Result: Debugger stops at wrong line Expected: Debugger should stop at correct line

Issue goes away when removing section in .vue file

Example file SimpleComponent.vue

<template>
  <div>Hi {{ name }}</div>
  <div>Good</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref("Peter")
console.log("Nothing special") // set breakpoint here
</script>
<style>
.useless {
  color: green;
}
</style>

Example simple.spec.js

import { test } from 'vitest'
import { render } from '@testing-library/vue'
import SimpleComponent from './components/SimpleComponent.vue'

test("Component", () => {
  const renderResult = render(SimpleComponent)
  renderResult.findByText("mymessage")
})

Full example vanilla project to clone and reproduce: https://github.com/bonham/vitest-debug-issue-js

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
    Memory: 20.77 GB / 31.93 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.80)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4 
    vite: ^5.1.6 => 5.1.6 
    vitest: ^1.3.1 => 1.3.1

Used Package Manager

npm

Validations

AriPerkkio commented 6 months ago

Can you test if @vitejs/plugin-vue@4.5.2 works?

This issue has come up before - it's not really Vitest related. I would guess that your breakpoints don't work even when debugging in browser during development.

Related discussions:

ghiscoding commented 5 months ago

This is most often related to bad or missing sourcemaps

bonham commented 5 months ago

Can you test if @vitejs/plugin-vue@4.5.2 works?

No, it has the same bug.

This issue has come up before - it's not really Vitest related. I would guess that your breakpoints don't work even when debugging in browser during development.

Breakpoints work well in browser. Breakpoints work well starting vite dev server in "Javascript debug terminal". So it's pretty much narrowed down to vitest I'd say.

Related discussions:

* [Coverage issue in vue files when upgraded with version 1.1.3  or 1.2.0 #4991](https://github.com/vitest-dev/vitest/discussions/4991)

^ This is not related to breakpoints

* [How to debug compents while running tests in VS code? #2874](https://github.com/vitest-dev/vitest/discussions/2874)

^ this is describing exactly the same problem.

Source maps are turned on as you can see in my minimalistic example: https://github.com/bonham/vitest-debug-issue-js/blob/main/vite.config.js

AriPerkkio commented 5 months ago

Breakpoints seem to work fine when using Chrome Dev tools:

https://github.com/vitest-dev/vitest/assets/14806298/d38cffaa-0529-4006-94ad-6818fdb8df47

bonham commented 5 months ago

Hi @AriPerkkio, yes you are right. I tried the same and also for me breakpoint works well. This is a good workaround. ( I never tried debugging this way before: https://vitest.dev/guide/debugging#node-inspector-e-g-chrome-devtools )

Summary:

Idk, but seems not a vitest issue but maybe a vs-code issue ( vue plugin or whatever .... )

CreativeTechGuy commented 5 months ago

Not sure if this is helpful or not, but I can reproduce this issue (in the VS Code debugger) without vue at all, just a plain node app. Disabling coverage when a debugger is attached is a workaround but unfortunate.

bonham commented 5 months ago

Not sure if this is helpful or not, but I can reproduce this issue (in the VS Code debugger) without vue at all, just a plain node app. Disabling coverage when a debugger is attached is a workaround but unfortunate.

with vitest or even without vitest?

CreativeTechGuy commented 5 months ago

@bonham Oh sorry, yes with vitest.

CreativeTechGuy commented 5 months ago

I just tested debugging in VS Code with a node app instrumented with istanbul and esbuild and it works fine with breakpoints being where they should be. So I think there's something in vitest specifically that is causing the problem, I don't think that VS Code is the root problem (although maybe a contributing factor).

AriPerkkio commented 5 months ago

@CreativeTechGuy how can I reproduce this issue? Is it with covearge.provider: 'v8' or covearge.provider: 'istanbul'? Does it work with vitest --inspect-brk?

CreativeTechGuy commented 5 months ago

@AriPerkkio Sorry for the delay, this is gnarly. I couldn't reproduce it starting from an empty repo, but I started deconstructing my massive repo and I was able to get it down to a few dozen lines total across all files. I've put a ton of information and very detailed steps in the repo README. Let me know if you are able to reproduce. I've been able to reproduce it across two computers (Windows 10 & 11) so far so hopefully you can too.

https://github.com/CreativeTechGuy/vitest-coverage-debugger-issue-repro

MarvinKubus commented 5 months ago

Hi @AriPerkkio, yes you are right. I tried the same and also for me breakpoint works well. This is a good workaround. ( I never tried debugging this way before: https://vitest.dev/guide/debugging#node-inspector-e-g-chrome-devtools )

Summary:

  • breakpoints work well when using node inspector and chrome devtools
  • breakpoints do not work when running vitest in debug mode within vs-code ( I tested on mac and windows )

Idk, but seems not a vitest issue but maybe a vs-code issue ( vue plugin or whatever .... )

We are experiencing this same problem at the moment and for us the workaround going through the Chrome Devtools is also working, but a lot less convenient to use.

mummybot commented 1 month ago

We have this issue at our work across multiple VueJS and Nuxt projects. Various developers have spent collective weeks trying to solve to no success.

AriPerkkio commented 1 month ago

There's some more discussion about VS Code not respecting inline source maps here: https://github.com/vitest-dev/vitest/issues/5605. Check the solution at the end and see if it works for you.

mummybot commented 1 month ago

Not sure if the solution at the end is quite our problem - they seem to be trying to debug node_modules, where we are failing on our application code. Trying their fix of this.showExternalized didn't fix anything :( Tried it on two separate projects.

AriPerkkio commented 1 month ago

Issue goes away when removing section in .vue file

To me this sounds like source mapping issue. As soon as I remove <style> tags from *.vue files, VS code debugger starts to work. It's like if the <style> tag is introducing another transform step that messes up the source maps completely.

Debugging in vs code without style tags works: https://github.com/user-attachments/assets/93b7cfaf-b205-485f-9905-cc78b6fc72cc

But when looking at the source maps they look just fine:

So to summarize:

We have quite many issues that are related to VS Code not being able to handle source maps. Does Vue debugging work in VS Code in general, without Vitest?

sheremet-va commented 1 month ago

We have quite many issues that are related to VS Code not being able to handle source maps. Does Vue debugging work in VS Code in general, without Vitest?

By default, Vitest strips all CSS styles. Does debugger work if test.css is enabled?

rafagsiqueira commented 5 days ago

Having the same issue with an angular application. Breakpoints are all messed up when debugging tests. Works perfectly when debugging application ran with ng serve.