@celestellaposted at 2024-01-31

Vue + Vitest ブレークポイントによる停止位置がずれる

Q&A

解決したいこと

「npm create vue@latest」を実施し、vitestの動作検証を行っています。
要件としてはvitestによる単体テスト実行中に、Vue SFCの<script>内にブレークポイントを設定し、VSCodeのデバッガと連動させたいです。

しかし、ブレークポイント周辺で実行が停止しデバッガ起動するものの、なぜか停止位置が本来の位置からズレてしまいます。

原因がわからずご教示いただけますと幸いです。
何卒、宜しくお願いいたします。

該当するコード／HelloWorld.vue

<script lang="js">
import { defineComponent, reactive, computed, onMounted } from 'vue'

export default defineComponent({
  props: {
    msg: {
      type: String
    }
  },

  setup(props) {
    const state = reactive({
      count: 0
    })

    onMounted(() => {
      increment()
    })

    const increment = () => {
      // 以下の行にブレークポイントを設定したとして、
      state.count += 1
      console.log('HelloWorld.vue')
      console.log('HelloWorld.vue')
      console.log('HelloWorld.vue')
      // なぜか以下の行で停止します。
      console.log('HelloWorld.vue')
      console.log('HelloWorld.vue')
    }

    return {
      state,
      increment,
      uppercasedMessage: computed(() => props.message?.toUpperCase())
    }
  },
})
</script>

vitest.config.js

sourcemapを加えたくらいで、ほぼ初期状態のままです。

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      environment: 'jsdom',
      exclude: [...configDefaults.exclude, 'e2e/*'],
      root: fileURLToPath(new URL('./', import.meta.url)),
      server: {
        sourcemap: true,
      }
    }
  })
)

package.json抜粋

npm create vue@latestを実行した後の初期状態のままです。

  "dependencies": {
    "pinia": "^2.1.7",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@playwright/experimental-ct-vue": "^1.41.1",
    "@playwright/test": "^1.41.1",
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^5.0.3",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/test-utils": "^2.4.4",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.0.3",
    "vite": "^5.0.11",
    "vitest": "^1.2.2"
  }

Are you sure you want to delete the question?