solidjs / solid-router

A universal router for Solid inspired by Ember and React Router
MIT License
1.11k stars 138 forks source link

Testing with new Solid Router. #335

Closed phungleson closed 6 months ago

phungleson commented 7 months ago

Describe the bug

There are 2 related questions regarding using Solid Router in test.

  1. With the old Solid Router, I can do something like this.
<Router source={source}>...</Router>

Where I can pass in source to test different pages.

With the new Solid Router, I wasn't be able to do something similar, even though I tried to use url

<Router url={url}>...</Router>

Router doesn't pick up url, but rather only take the url from the address bar.

  1. I used to pass source as LocationChangeSignal, and assert the changes of the location. I don't know how to do it with the new version, since docs is quite limited.

Cheers,

Your Example Website or App

I tried to put some code into playground but somehow cannot add @solidjs/router as dependency.

Steps to Reproduce the Bug or Issue

N/A

Expected behavior

N/A

Screenshots or Videos

No response

Platform

N/A

Additional context

No response

ryansolid commented 6 months ago

Could you use the Memory Router for tests? It allows you to inject your own History manager as well to control where it goes. The does only use the URL bar in the client, I made it isomorphic by detecting client server and using Static Router on server which does use the URL directly. Static Router is another option here I suppose.

phungleson commented 6 months ago

Thanks, it seems that we don't have enough docs for <MemoryRouter />, not sure if I can make it work.

Normally when testing, I render the whole <Root /> including the <Router /> component inside it, so I assume I just replace <Router /> by <MemoryRouter />? or I have to wrap everything in a <MemoryRouter />?

ryansolid commented 6 months ago

Yes replace <Router/> with <MemoryRouter />. What i was saying is you can initiate a history object that gives you control.

Like:

// create history
const fauxHistory = createMemoryHistory();

// do stuff with it:
fauxHistory.set({ value: "/" }) // go to some url

// plug it into the router.
<MemoryRouter history={fauxHistory} />