diff --git a/packages/docs/content/docs/testing.mdx b/packages/docs/content/docs/testing.mdx
index 0401755f..2cd8e834 100644
--- a/packages/docs/content/docs/testing.mdx
+++ b/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"
+
+
+```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()
+ render(, {
+ // 1. Setup the test by passing initial search params / querystring:
+ wrapper: ({ children }) => (
+
+ {children}
+
+ )
+ })
+ // 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')
+})
+```
+
+
+
See issue [#259](https://github.com/47ng/nuqs/issues/259) for more testing-related discussions.
diff --git a/packages/docs/mdx-components.tsx b/packages/docs/mdx-components.tsx
index 577f16fe..9fb7b8ee 100644
--- a/packages/docs/mdx-components.tsx
+++ b/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 }) => (
{props.children}
diff --git a/packages/nuqs/src/adapters/testing.ts b/packages/nuqs/src/adapters/testing.ts
index edd4c2ea..73fe51f6 100644
--- a/packages/nuqs/src/adapters/testing.ts
+++ b/packages/nuqs/src/adapters/testing.ts
@@ -9,9 +9,11 @@ export type UrlUpdateEvent = {
options: Required
}
+export type OnUrlUpdateFunction = (event: UrlUpdateEvent) => void
+
type TestingAdapterProps = {
searchParams?: string | Record | URLSearchParams
- onUrlUpdate?: (event: UrlUpdateEvent) => void
+ onUrlUpdate?: OnUrlUpdateFunction
rateLimitFactor?: number
children: ReactNode
}