gutter icons only on js and jsx files

[Kaiser-Nico]

Hello, for some reason the icons to start the tests are only displayed in .js and .jsx files. My setup looks like this:

vite.config.js: test: { globals: true, },

tsconfig.json: "compilerOptions": { "types": [ "vitest/globals"] }, "include": [ "src", "node_modules/vitest/globals.d.ts" ]

[linux-china]

@Kaiser-Nico could share your demo example on GitHub? and I will take a look. Thanks.

[timges]

I can second @Kaiser-Nico. Gutter Icons only appear on *.test.js(x) files.

[linux-china]

Vitest Runner plugin does not check the file name pattern, and just check method call of "test", "it", "describe" from Vitest.

Any screenshot or example repo?

[nika-d]

Hi! I had the same problem, and your last answer, linux-china, helped me to fix it, thank you very much!

In my project, we switched from jest to vitest.

Now, jest is removed from the devDependencies. Anyway, during npm install for example @types/jest is installed (resolved as co dependency or something). And going in the editor from the "describe" or "it" method call to its definition leads still to @types/jest . So PhpStorm is really convinced, that i want to use jests descibe, not that of vitest.

A working fix is to add import {descibe, it} from 'vitest' in the test file .

Thats how i do it now. Unfortunately, i have to put it in every test file again and again. Would be sensful to tell PhpStorm that its by default the vitest-describe. Any hint how to do that would be appreciated. :)

[linux-china]

@nika-d could you share the simple project on github? and I could take a look.

jest is removed from the devDependencies. Anyway, during npm install for example @types/jest is installed (resolved as co dependency or something).

Yes, it's a problem. How about following solution?

"scripts": {
    "postinstall": "rm -rf node_modules/jest*; rm -rf node_modules/@jest"
}

[nika-d]

Hi @linux-china !

Thanks a lot for your quick reply, and sorry for the late answer. I had to coordinate with colleagues to publish the code here.

Please find the repo here: https://github.com/nika-d/LLP-Frontend

Tests in this directory show the problem: https://github.com/nika-d/LLP-Frontend/tree/main/src/lib/test/useCases/lehrendenEintragung/viewModel Tests for Termin... have no import from vitest --> NO gutter shown Tests for LehrTaetig... have import --> gutter shown

Additionally, here is my .idea-Folder : idea.zip Maybe the issue is connected to workspace or something...?

The suggested fix with postinstall is a good idea! Thanks for that, too 🙂

And if you dont have time for further investigation here - its totally fine! I mean, its a bit clumsy, but working.

[linux-china]

In your test code, describe is a global function, and you should add test: { globals: true}, according to https://vitest.dev/config/#globals It's hard to let IDE to pare or execute all code to get Vitest configuration with following vitest.config.js:

import { extractFromSvelteConfig } from 'vitest-svelte-kit'

export default extractFromSvelteConfig()

Change your vitest.config.js as following:

import {extractFromSvelteConfig} from 'vitest-svelte-kit'
import {defineConfig} from 'vitest/config'

export default defineConfig({
    ...extractFromSvelteConfig(),
    test: {
        globals: true,
    },
})

Reopen your project, and vitest test icons will be available as following:

[nika-d]

Thank you for the help! I am trying it with globals: true . Gutters are shown now 👍 Unfortunately, $lib cannot be resolved when used in tests ("Error: [vite-node] Failed to load $lib/useCases/lehrendenEintragung/viewModel/LehrTaetigkeit").

I´ll try to correct that too, and will comment here again.