S
SolidJS12mo ago
oneiro

solidjs/testing-library using `location` but still getting <Router /> error

Hey, I am currently trying to setup on of my solid-apps with solidjs/testing-library. I want to test something on my main route, and am therefore using the location option. However my test still throws the Make sure your app is wrapped in a <Router />-error. Any idea what I could be doing wrong? Here's my test wip test case:
it('should run on toggle start', async () => {
// Arrange
// TODO:
// fill store with a time entry
const screen = render(() => <App />, { location: '/' })
setIsHydrating(false)

// Act
// TODO:
// press play on the time entry with the respective id
// move time forward
const currentTimerStartButton = await screen.findByRole('button', { name: 'start-current-timer' })
fireEvent.click(currentTimerStartButton)

// Assert
// TODO:
// assert that current timer displays correct time entry
expect(true).toBe(true)
})
it('should run on toggle start', async () => {
// Arrange
// TODO:
// fill store with a time entry
const screen = render(() => <App />, { location: '/' })
setIsHydrating(false)

// Act
// TODO:
// press play on the time entry with the respective id
// move time forward
const currentTimerStartButton = await screen.findByRole('button', { name: 'start-current-timer' })
fireEvent.click(currentTimerStartButton)

// Assert
// TODO:
// assert that current timer displays correct time entry
expect(true).toBe(true)
})
And here's the top level component I am testing:
const App = () => {
return (
<Routes>
<Route path="/" component={Overview} />
<Route path="/projects" component={Projects} />
<Route path="/settings" component={Settings} />
</Routes>
)
}
export default App
const App = () => {
return (
<Routes>
<Route path="/" component={Overview} />
<Route path="/projects" component={Projects} />
<Route path="/settings" component={Settings} />
</Routes>
)
}
export default App
17 Replies
Alex Lohr
Alex Lohr12mo ago
Thanks for providing feedback. This is almost the same as the unit test I was running. Not sure what setIsHydrating(false) is going to achieve here. Unfortunately, it's a bit late for me. I'll be back tomorrow. One thing: which exact router package do you have installed in package.json? If it is not @solidjs/router, that's the reason.
oneiro
oneiro12mo ago
thanks for chiming in so quickly 🙂 I am indeed using @solidjs/router. The isHydrating-part is just a boolean signal that I is controlling a <Show />-component inside my <Overview /> . It's rather late for me as well 😄 - so hopefully we'll be able to fix this tomorrow. Thanks! I just checked again: we seem to also have the identical version number of the router package inside our package.json. However I also receive the following error at the top of my test: It appears you want to use the location option without having @solidjs/router installed. - this only happens when I execute the test. The vite dev server bundles fine. Vite and vitest share the same config file, if that matters.
oneiro
oneiro12mo ago
oneiro
oneiro12mo ago
Alex Lohr
Alex Lohr12mo ago
that means that for some unknown reason, the await import fails. I hope we can align our schedules tomorrow for some pair debugging session.
oneiro
oneiro12mo ago
that would be cool 🙂 👍
Alex Lohr
Alex Lohr12mo ago
I'm on CEST time zone. Are you using npm/yarn/pnpm?
oneiro
oneiro12mo ago
pnpm
Alex Lohr
Alex Lohr12mo ago
Thanks. I'll try a few things to reproduce the issue before I come back to you tomorrow.
oneiro
oneiro12mo ago
I am in CEST as well (if I am not mistaken 😅 )
Alex Lohr
Alex Lohr12mo ago
wonderful. Then see ya tomorrow!
oneiro
oneiro12mo ago
Awesome, thank you, too Cya 👋 @lexlohr so I think I might be able to pair around 7 or 8 pm, if that works for you 🙂
Alex Lohr
Alex Lohr12mo ago
I need to bring my kids to bed at that time. I may have ~20 min now or a bit more time around 9 PM.
oneiro
oneiro12mo ago
no worries, lets meet at 9 PM. My son should be in bed at that time as well, so this would be better for me anyway 🙂
Alex Lohr
Alex Lohr12mo ago
ok I found the culprit: vite's loader. You can workaround it by using test.deps = { inline: [/solid-js/, /@solidjs\/router/] } in your vite(st).config. Then the tests work fine for me. It only seems to happen with pnpm, not with npm. Strange, it previously worked with npm, now it seems to also fail with it. In any case, the workaround seems to work there, too. Thanks for telling me this, I shall document it.
oneiro
oneiro12mo ago
Awesome - this seems to work! Thanks for the quick fix 👍
Alex Lohr
Alex Lohr12mo ago
Happy to help. I'm currently documenting the case and will also try to make the error message even more helpful.
Want results from more Discord servers?
Add your server
More Posts