SolidJS•2y ago

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•2y 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.

oneiroOP•2y 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.

oneiroOP•2y ago

oneiroOP•2y ago

Alex Lohr•2y 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.

oneiroOP•2y ago

that would be cool 🙂 👍

Alex Lohr•2y ago

I'm on CEST time zone. Are you using npm/yarn/pnpm?

oneiroOP•2y ago

pnpm

Alex Lohr•2y ago

Thanks. I'll try a few things to reproduce the issue before I come back to you tomorrow.

oneiroOP•2y ago

I am in CEST as well (if I am not mistaken 😅 )

Alex Lohr•2y ago

wonderful. Then see ya tomorrow!

oneiroOP•2y 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•2y 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.

oneiroOP•2y 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•2y 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.

oneiroOP•2y ago

Awesome - this seems to work! Thanks for the quick fix 👍

Alex Lohr•2y ago

Happy to help. I'm currently documenting the case and will also try to make the error message even more helpful.

Gaming

Programming

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