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 }