vitest Svelte App with Typescript : ParseError ... Unexpected token ` : `-CodePudding

I am trying to setup some unit-tests with vitest on a Svelte Application (with Typescript support), and I get the following error:

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

In this file, that correspond to:

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

I have tried to reproduce the structure from the official Vitest example on GitHub.

I looked a bit everywhere and tried to use vitest-svelte-kit or adding a svelte.config.js (Which doesn't work because of the import statement "outside a module")

Find below my config.

In my package.json I added all of this:

// 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',
    },
})

I don't have a svelte.config.js

CodePudding user response：

TS requires svelte-preprocess, the test config probably does not load it implicitly. You can pass it to the plugin or configure it via the svelte.config.js:

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

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