Document that testing hooks that rely on useQueryState should use the wrapper option

[sebastianvitterso]

I spent a while trying to figure out how to smoothly test my hook that relies on useQueryState in jest and react testing library.

To test hooks, one uses renderHook, something like so:

// hook
const useHook = () => {
  const [a, setA] = useState("")
  return { a, setA }
}

// test code
const { result } = renderHook(() => useHook())
const { a, setA } = result.current

But it fails to do it this simply when using useQueryState because we need to wrap it in the <NuqsTestingAdapter /> component/context.

This can be done very simply, however, as follows:

// hook
const useHook = () => {
  const [a, setA] = useQueryState("a")
  return { a, setA }
}

// test code
const { result } = renderHook(() => useHook(), { wrapper: NuqsTestingAdapter })
const { a, setA } = result.current

This should be very neatly documentet here: https://nuqs.47ng.com/docs/testing

[franky47]

It is in the docs, where we explain that withNuqsTestingAdapter uses the testing adapter internally:

https://nuqs.47ng.com/docs/testing#nuqstestingadapter

Maybe that part of the docs can be made more explicit, would you like to open a PR?

[sebastianvitterso]

I can have a go at it!

[sebastianvitterso]

I see it's mentioned/shown briefly for Vite, but there it's done with withNuqsTestingAdapter.

[franky47]

withNuqsTestingAdapter is a convenience function to create a wrapper with the right props passed to the NuqsTestingAdapter, to reduce boilerplate a bit regarding passing children down.

[franky47]

Added in #795, thanks!

FYI, I renamed the description to "See #784" as semantic-release doesn't support closing keywords for discussions, and crashes when trying to close them as issues (something I need to address at some point).

[sebastianvitterso]

Ah, sorry, I thought I just wrote "See" the first time around, and figured I should make it close the discussion. But that explains it!