Skip to content

Commit 4ca0dc7

Browse files
committed
doc: Add testing docs
1 parent b6ea0c9 commit 4ca0dc7

File tree

1 file changed

+28
-0
lines changed

1 file changed

+28
-0
lines changed

README.md

+28
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,34 @@ const search = await setCoordinates({
414414
})
415415
```
416416

417+
## Testing
418+
419+
Currently, the best way to test the behaviour of your components using
420+
`useQueryState(s)` is end-to-end testing, with tools like Playwright or Cypress.
421+
422+
Running components that use the Next.js router in isolation requires mocking it,
423+
which is being [worked on](https://github.com/scottrippey/next-router-mock/pull/103)
424+
for the app router.
425+
426+
If you wish to spy on changes in the URL query string, you can use
427+
`subscribeToQueryUpdates`:
428+
429+
```ts
430+
import { subscribeToQueryUpdates } from 'next-usequerystate'
431+
432+
React.useEffect(
433+
() =>
434+
subscribeToQueryUpdates(({ search, source }) => {
435+
console.log(search.toString()) // URLSearchParams
436+
console.log(source) // 'internal' | 'external'
437+
}),
438+
// This returns an unsubscribe function
439+
[]
440+
)
441+
```
442+
443+
See issue #259 for more testing-related discussions.
444+
417445
## Caveats
418446

419447
Because the Next.js **pages router** is not available in an SSR context, this

0 commit comments

Comments
 (0)