Vitest + solidjs router don't work

[Eugeniocalabresi]

I just installed the ts-vitest template in this way:

npx degit solidjs/templates/ts-vitest test-ts-vitest

I have also installed the @solidjs/router library
In addition to the other three default tests I added your doc's example test :

it('uses params', async () => {
  const App = () => (
    <>
      <Route path="/ids/:id" component={() => <p>Id: {useParams()?.id}</p>} />
      <Route path="/" component={() => <p>Start</p>} />
    </>
  ); 
  const { findByText } = render(() => <App />, { location: "ids/1234" });
  expect(await findByText("Id: 1234")).not.toBeFalsy();
});

I got this error:

(node:7182) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
stderr | file:/home/eugenio/project/FE/prova-ts-vitest/node_modules/.pnpm/solid-js@1.8.11/node_modules/solid-js/dist/dev.js:1747:67
You appear to have multiple instances of Solid. This can lead to unexpected behavior.

stderr | src/todo-list.test.tsx > test > uses params
Error attempting to initialize @solidjs/router:
"Unknown file extension ".jsx" for /home/eugenio/project/FE/prova-ts-vitest/node_modules/.pnpm/@solidjs+router@0.13.1_solid-js@1.8.11/node_modules/@solidjs/router/dist/index.jsx"
computations created outside a `createRoot` or `render` will never be disposed

 ❯ src/todo-list.test.tsx (1) 1009ms
   ❯ test (1) 1009ms
     × uses params 1008ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/todo-list.test.tsx > test > uses params
TestingLibraryElementError: Unable to find an element with the text: Id: 1234. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<div>
  [object Object]
  [object Object]
</div>

Ignored nodes: comments, script, style
<div>
  [object Object]
  [object Object]
</div>
 ❯ waitForWrapper node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/wait-for.js:160:27
 ❯ findByText node_modules/.pnpm/@testing-library+dom@9.3.1/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
 ❯ src/todo-list.test.tsx:14:18
     12|     ); 
     13|     const { findByText } = render(() => <App />, { location: "ids/1234" });
     14|     expect(await findByText("Id: 1234")).not.toBeFalsy();
       |                  ^
     15|   });
     16| 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  16:59:30
   Duration  2.00s (transform 216ms, setup 105ms, collect 275ms, tests 1.01s, environment 330ms, prepare 72ms)

please help me! 🥲

[Eugeniocalabresi]

I'm using:

• node v21.7.2
• pnpm v8.15.6

[atk]

Thanks for the information. The error is most likely either in the template or in vite-plugin-solid. I will have a closer look in any case.

[paularmstrong]

This seems related only to using the location option on the render method. Setting any value there will result in nothing being rendered.

[atk]

Unfortunately, I cannot reproduce this error; however, using useNavigate() does not work at all; it claims it was used outside of a route context. I'm still investiaging.

[atk]

Adding an <A>-tag (with noScroll to avoid an error due to scrolling not being supported by jsdom) inside a Route worked for my, though. The investigation continues.

[agmcleod]

I was able to get some stuff working with the wrapper & memory router, but im not sure how one would do this if they needed to test with route params. If I set the path to anything but "/" it wont load, as I wont be on that URL.

    const App = () => (
      <>
        <Route path='/' component={MyComponent} />
      </>
    )
    const { findByLabelText, findByText, queryByText } = render(() => <App />, {
      wrapper: ({ children }) => <MemoryRouter>{children}</MemoryRouter>,
    })

[Eugeniocalabresi]

Inserting these inline deps in the vitest.config.ts seems to work

import { defineConfig, mergeConfig } from "vitest/config";
import viteConfig from "./vite.config";

export default mergeConfig(
    viteConfig,
    defineConfig({
      test: {
        watch: false,
        globals: true,
        environment: "jsdom",
        setupFiles: ["node_modules/@testing-library/jest-dom/vitest"],
        server: {
          deps: {
            inline: ["@solidjs/testing-library", "@solidjs/router"],
          },
        },
      },
    })
  );

[agmcleod]

That seems to work for me too, here's my full config in case it helps anyone else. I guess this sets it to use jsdom for tests so the router can function?

import solid from 'vite-plugin-solid'
import { defineConfig, mergeConfig } from 'vitest/config'
import path from 'path'

export default defineConfig({
  plugins: [solid()],
  resolve: {
    conditions: ['development', 'browser'],
    alias: {
      '~': path.resolve(__dirname, './src'),
    },
  },
  test: {
    watch: false,
    environment: 'jsdom',
    setupFiles: ['node_modules/@testing-library/jest-dom/vitest'],
    server: {
      deps: {
        inline: ['@solidjs/testing-library', '@solidjs/router'],
      },
    },
  },
})

[JacopoPatroclo]

Inserting these inline deps in the vitest.config.ts seems to work

import { defineConfig, mergeConfig } from "vitest/config";
import viteConfig from "./vite.config";

export default mergeConfig(
viteConfig,
defineConfig({
test: {
watch: false,
globals: true,
environment: "jsdom",
setupFiles: ["node_modules/@testing-library/jest-dom/vitest"],
server: {
deps: {
inline: ["@solidjs/testing-library", "@solidjs/router"],
},
},
},
})
);

In my case, adding just "@solidjs/testing-library" did the trick.
No need for the additional "@solidjs/router".

Reading here:

Vite will process inlined modules. This could be helpful to handle packages that ship .js in ESM format (that Node can't handle).

I guess that "@solidjs/testing-library" is ESM only, could it be the reason?
If that's the case, could it be worth mention it on the docs?

Current deps:

"@solidjs/testing-library": "^0.8.10"
"vitest": "^3.0.6"
Node v23.7.0

[Eugeniocalabresi]

Yes, I think it’s useful to add it to the docs.