feat: Export OnUrlUpdateFunction type for Vitest v2 (#712)

Add docs for both v1 & v2, using Fumadocs's code tab directives.

packages/docs/content/docs/testing.mdx

@@ -9,7 +9,9 @@ by wrapping your rendered component in a `NuqsTestingAdapter{:ts}`.
 Here is an example for Vitest and Testing Library to test a button rendering
 a counter:
 
-```tsx title="counter-button.test.tsx"
+<Tabs items={['Vitest v1', 'Vitest v2']}>
+
+```tsx title="counter-button.test.tsx" tab="Vitest v1"
 // [!code word:NuqsTestingAdapter]
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
@@ -34,10 +36,45 @@ it('should increment the count when clicked', async () => {
   // 3. Assert changes in the state and in the (mocked) URL
   expect(button).toHaveTextContent('count is 43')
   expect(onUrlUpdate).toHaveBeenCalledOnce()
-  expect(onUrlUpdate.mock.calls[0][0].queryString).toBe('?count=43')
-  expect(onUrlUpdate.mock.calls[0][0].searchParams.get('count')).toBe('43')
-  expect(onUrlUpdate.mock.calls[0][0].options.history).toBe('push')
+  const event = onUrlUpdate.mock.calls[0][0]!
+  expect(event.queryString).toBe('?count=43')
+  expect(event.searchParams.get('count')).toBe('43')
+  expect(event.options.history).toBe('push')
 })
 ```
 
+```tsx title="counter-button.test.tsx" tab="Vitest v2"
+// [!code word:NuqsTestingAdapter]
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { NuqsTestingAdapter, type OnUrlUpdateFunction } from 'nuqs/adapters/testing'
+import { describe, expect, it, vi } from 'vitest'
+import { CounterButton } from './counter-button'
+
+it('should increment the count when clicked', async () => {
+  const user = userEvent.setup()
+  const onUrlUpdate = vi.fn<OnUrlUpdateFunction>()
+  render(<CounterButton />, {
+    // 1. Setup the test by passing initial search params / querystring:
+    wrapper: ({ children }) => (
+      <NuqsTestingAdapter searchParams="?count=42" onUrlUpdate={onUrlUpdate}>
+        {children}
+      </NuqsTestingAdapter>
+    )
+  })
+  // 2. Act
+  const button = screen.getByRole('button')
+  await user.click(button)
+  // 3. Assert changes in the state and in the (mocked) URL
+  expect(button).toHaveTextContent('count is 43')
+  expect(onUrlUpdate).toHaveBeenCalledOnce()
+  const event = onUrlUpdate.mock.calls[0][0]!
+  expect(event.queryString).toBe('?count=43')
+  expect(event.searchParams.get('count')).toBe('43')
+  expect(event.options.history).toBe('push')
+})
+```
+
+</Tabs>
+
 See issue [#259](https://github.com/47ng/nuqs/issues/259) for more testing-related discussions.

packages/docs/mdx-components.tsx

@@ -1,5 +1,6 @@
 import { Callout } from 'fumadocs-ui/components/callout'
 import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock'
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
 import defaultMdxComponents from 'fumadocs-ui/mdx'
 import type { MDXComponents } from 'mdx/types'
 import { Suspense } from 'react'
@@ -10,6 +11,8 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     ...components,
     Callout,
     Suspense,
+    Tab,
+    Tabs,
     pre: ({ ref: _ref, ...props }) => (
       <CodeBlock {...props}>
         <Pre>{props.children}</Pre>

packages/nuqs/src/adapters/testing.ts

@@ -9,9 +9,11 @@ export type UrlUpdateEvent = {
   options: Required<AdapterOptions>
 }
 
+export type OnUrlUpdateFunction = (event: UrlUpdateEvent) => void
+
 type TestingAdapterProps = {
   searchParams?: string | Record<string, string> | URLSearchParams
-  onUrlUpdate?: (event: UrlUpdateEvent) => void
+  onUrlUpdate?: OnUrlUpdateFunction
   rateLimitFactor?: number
   children: ReactNode
 }