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/[email protected]/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/@[email protected][email protected]/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/@[email protected]/node_modules/@testing-library/dom/dist/wait-for.js:160:27
 ❯ findByText node_modules/.pnpm/@[email protected]/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.