Vitest fails with TypeError: Unknown file extension ".jsx"

[aminya]

I am trying to test a component using Vitest, but following the documentation fails with this error
https://docs.solidjs.com/guides/testing#adding-testing-packages

TypeError: Unknown file extension ".jsx" for /media/aminya/Linux/GitHub/test/test/node_modules/.pnpm/@corvu+utils@0.2.0_solid-js@1.8.17/node_modules/@corvu/utils/dist/reactivity/index.jsx

My test file is a tsx file. It seems Vitest has trouble loading the .jsx file. My config is the same as the doc.

        "@solidjs/testing-library": "^0.8.8",
        "@testing-library/jest-dom": "^6.4.5",
        "@testing-library/user-event": "^14.5.2",
        "@vitest/coverage-v8": "^1.6.0",
        "@vitest/ui": "^1.6.0",
        "solid-devtools": "^0.30.1",
        "typescript": "^5.4.5",
        "vite": "^5.2.12",
        "vite-plugin-solid": "^2.10.2",
        "vitest": "^1.6.0"
    

[NexRX]

Im not alone, yes!
I have a stackblitz here that reproduces it and it's fairly minimal, only adding one file ontop of the solidstart vitest template.
https://stackblitz.com/edit/solidjs-templates-6zmfus?file=package.json&view=editor

Did you ever manage to fix it?

[aminya]

No, I could not fix the issue, but I added a production in #158 as well. I talked to @ryansolid about this. He mentioned that @atk created the testing part of the plugin.

[atk]

It is really hard to keep up with the constant changes, so I'm sorry, but I have no fast solution.

[aminya]

Does #158 help you debug the issue?

[NexRX]

I'm working around this with the experimental vitest feature 'browser mode' so no fast solutions needed personally :)

[jaroel]

I'm on MacOS and use PNPM. preserveSymlinks: true seems to fix the problem for me, YMMV.

import { defineConfig } from "vitest/config";
export default defineConfig({
  resolve: {
    preserveSymlinks: true,
  },
});

[kiocos]

@aminya were you able to fix this?

[paularmstrong]

This seems to have regressed when updating to Vitest 4.

[atk]

You need to add vite-plugin-solid to that config.

[paularmstrong]

@atk I have it in my configs, but it does not work with vitest 4. Downgrading to 3 works fine.

import { defineConfig } from 'vitest/config';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
	resolve: {
		conditions: ['development', 'browser'],
	},
	plugins: [solidPlugin()],
	test: {
		environment: 'happy-dom',
		globals: true,
		restoreMocks: true,
		mockReset: true,
	},
});

[atk]

This is strange, it works for me with

    "vite": "^7.1.4",
    "vite-plugin-solid": "^2.11.8",
    "vitest": "^4.0.16"

[paularmstrong]

Are there some special or specific tsconfigs, maybe? Here's what I'm using

{
	"compilerOptions": {
		"allowImportingTsExtensions": true,
		"allowSyntheticDefaultImports": true,
		"allowUnreachableCode": false,
		"allowUnusedLabels": false,
		"checkJs": true,
		"composite": true,
		"declaration": true,
		"declarationMap": false,
		"downlevelIteration": true,
		"erasableSyntaxOnly": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"jsxImportSource": "solid-js",
		"lib": ["esnext", "dom", "dom.iterable"],
		"module": "esnext",
		"moduleResolution": "bundler",
		"noFallthroughCasesInSwitch": true,
		"noImplicitAny": true,
		"noImplicitReturns": true,
		"noImplicitThis": true,
		"noUncheckedIndexedAccess": true,
		"noUnusedLocals": true,
		"noUnusedParameters": false,
		"removeComments": true,
		"resolveJsonModule": true,
		"rewriteRelativeImportExtensions": true,
		"skipLibCheck": true,
		"strict": true,
		"target": "esnext",
		"types": ["node", "vite/client", "vitest/globals", "@testing-library/jest-dom/vitest"],
		"verbatimModuleSyntax": true
	}
}

[atk]

I have now used your tsconfig, but vitest still runs without any issue. Here's my vite.config.ts:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  resolve: { conditions: ["development", "browser"] },
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'happy-dom',
		globals: true,
		restoreMocks: true,
		mockReset: true
  }
});

And here is package.json:

{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest"
  },
  "license": "MIT",
  "devDependencies": {
    "happy-dom": "^20.0.11",
    "typescript": "^5.7.2",
    "vite": "^7.1.4",
    "vite-plugin-solid": "^2.11.8",
    "vitest": "^4.0.16"
  },
  "dependencies": {
    "solid-js": "^1.9.10"
  }
}

[paularmstrong]

@atk here's a repro: https://stackblitz.com/edit/vitejs-vite-uwafdm6n?file=vitest.config.ts

Perhaps it's using a monorepo that's the issue? Is the plugin not resolving paths to node_modules correctly?