ujian unit - vitest Apl Svelte dengan Typescript : ParseError ... Token tidak dijangka ` : `

Saya sedang mencuba untuk menyediakan beberapa ujian unit dengan vitest pada Aplikasi Svelte (dengan sokongan Typescript), dan saya mendapat ralat berikut:

ParseError: D:/(...)/src/Overlay.svelte:23:17 Unexpected token

Dalam fail ini, yang bersamaan dengan:

<!-- Overlay.svelte -->
<script lang="ts">   // line 1
    //  (...)
    let startDate:string = tomorrows_date();  // line 23
//               ^--23:17

Saya telah cuba untuk menghasilkan semula struktur dari contoh rasmi Vitest di GitHub.

Saya melihat sedikit di mana-mana dan cuba menggunakan vitest-svelte-kit atau menambah svelte.config.js (Yang tidak berfungsi kerana pernyataan import "di luar modul")

Lihat konfigurasi saya di bawah.

Dalam package.json saya, saya menambah semuanya ini:

// package.json
   (...)
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear -c",
    "validate": "svelte-check",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-typescript": "^8.0.0",
     (...)
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.45",
    "@testing-library/svelte": "^3.1.3",
    "@tsconfig/svelte": "^2.0.0",
    "@vitest/ui": "latest",
    "jsdom": "latest",
    "rollup": "^2.67.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.49.0",
    "svelte-check": "^2.0.0",
    "svelte-preprocess": "^4.0.0",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0",
    "vitest": "^0.18.1",
    "vitest-svelte-kit": "^0.0.6"
  },
  "dependencies": {
    "sirv-cli": "^2.0.2",
    "svelte-material-ui": "^6.0.0-beta.16"
  },
  "stackblitz": {
    "startCommand": "npm run test:ui"
  }
}

// tsconfig.json
{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

// vitest.config.js
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
    plugins: [
        svelte({ hot: !process.env.VITEST }),
    ],
    test: {
        globals: true,
        environment: 'jsdom',
    },
})

Saya tidak mempunyai svelte.config.js

Jawapan #1

TS memerlukan svelte-preprocess, konfigurasi ujian mungkin tidak memuatkannya secara implisit. Anda boleh menyampaikannya kepada plugin atau mengkonfigurasinya melalui svelte.config.js:

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({ ... })
};

Jawapan #2

Gunakan konfigurasi berikut dalam fail konfigurasi vitest anda :

import { defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess'

export default defineConfig({
  plugins: [
    svelte({
      hot: !process.env.VITEST,
      preprocess: [sveltePreprocess({ typescript: true })] // <-- this line allow vitest to parse svelte component using typescript
    })
  ],
  test: {
    include: ['imports/**/*.vitest.{js,ts}'],
    globals: true,
    environment: 'jsdom',
  },
})