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

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"

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?

@ryansolid

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.

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

Does #158 help you debug the issue?

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

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,
  },
});

@aminya

@aminya were you able to fix this?

This seems to have regressed when updating to Vitest 4.

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

@atk

@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,
	},
});

This is strange, it works for me with

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

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
	}
}

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"
  }
}

fix cannot use name: solid-js (see vitest-dev/vitest#6418 and solidjs…

@atk

@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?

Stackblitz is known to have issues. Can you try to run it locally?

It has the same result in stackblitz and locally.

 npm test

> test
> vitest


 DEV  v4.0.18 ~/Downloads/vitejs-vite-uwafdm6n

 ❯  package-a  src/component.test.tsx (0 test)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL   package-a  src/component.test.tsx [ modules/package-a/src/component.test.tsx ]
TypeError: Unknown file extension ".jsx" for ~/Downloads/vitejs-vite-uwafdm6n/node_modules/@solidjs/router/dist/routers/components.jsx
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ [1/1] ⎯


 Test Files  1 failed (1)
      Tests  no tests
   Start at  11:02:04
   Duration  316ms (transform 64ms, setup 52ms, import 0ms, tests 0ms, environment 95ms)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

I had a similar issue with solidjs router - this ended up being the fix for me:

  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/tests/setup.ts',
    mockReset: true,
    preserveSymlinks: true,
    server: {
      deps: {
        inline: [/@solidjs\/router/],
      },
    },
  },

server: {
deps: {
inline: [/@solidjs/router/],
},
},

Thank you, this part helped me too, here is mine:

import solid from "vite-plugin-solid"
import { defineConfig } from "vitest/config"

export default defineConfig({
    plugins: [solid()],
    resolve: {
        conditions: ["development", "browser"],
    },
    test: {
        environment: "jsdom",
        server: {
            deps: {
                inline: [/@solidjs\/router/],
            },
        },
    },
})

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

NexRX commented on Jul 15, 2024

aminya commented on Jul 15, 2024

atk commented on Jul 16, 2024

aminya commented on Jul 16, 2024

NexRX commented on Jul 17, 2024

jaroel commented on Sep 16, 2024

kiocos commented on Dec 3, 2025

paularmstrong commented on Dec 30, 2025

atk commented on Dec 30, 2025

paularmstrong commented on Dec 31, 2025

atk commented on Dec 31, 2025

paularmstrong commented on Jan 5, 2026

atk commented on Jan 6, 2026

paularmstrong commented on Jan 28, 2026

atk commented on Jan 28, 2026

paularmstrong commented on Jan 28, 2026

green3g commented on Jan 29, 2026

idofilus commented on Mar 1, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions