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

Question

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

H.B. · Accepted Answer · 2022-07-19T07:35:49.310

2

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({ ... })
};

edited Jul 19 '22 at 07:35

answered Jul 18 '22 at 14:27

H.B.

166,899
29
327
400

When I try to add this in `svelte.config.js`, I have an error that `import cannot be used outside of a module` – vinalti Jul 18 '22 at 18:03
And if I try to set `type: "module"` inside the `package.json` I get 10 more errors popping up. – vinalti Jul 18 '22 at 18:29
You can probably reformulate it to CommonJS using `const sveltePreprocess = require('svelte-preprocess');` and change the export to `module.exports = defineConfig(...)`. – H.B. Jul 18 '22 at 18:59
Though the `vitest.config.js` you posted in the question was in ES format, so that should have caused errors even before. – H.B. Jul 18 '22 at 19:00
That is the thing : the `vitest.config.js` is working ! – vinalti Jul 18 '22 at 20:58
1

Well, if Rollup does not like ES but Vitest does, you'll have to use the appropriate formats for each one. – H.B. Jul 18 '22 at 21:00
So that was almost it, I had to edit the svelte config like this : `const sveltePreprocess = require('svelte-preprocess');` `module.exports = { preprocess: sveltePreprocess({ }) };` [Details here](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md#with-svelte-config) Could you update your answer so I can validate it ? – vinalti Jul 19 '22 at 07:30
My code was intended directly for the test config, but you can of course use the `svelte.config.js` as well. Adjusted answer. – H.B. Jul 19 '22 at 07:35

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

1 Answers1