Skip to content

feat: add next/link mock with useLinkStatus#121

Merged
valentinpalkovic merged 2 commits into
storybookjs:mainfrom
yatishgoel:feat/next-link-mock
May 19, 2026
Merged

feat: add next/link mock with useLinkStatus#121
valentinpalkovic merged 2 commits into
storybookjs:mainfrom
yatishgoel:feat/next-link-mock

Conversation

@yatishgoel

Copy link
Copy Markdown
Contributor

Summary

Adds a Storybook-friendly mock for next/link, including the useLinkStatus hook introduced in Next 15.3. Previously, @storybook/nextjs-vite had no Link mock at all — stories using next/link (and especially useLinkStatus) would fail with:

TypeError: (0 , next_link__WEBPACK_IMPORTED_MODULE_2__.useLinkStatus) is not a function

What changed

  • New alias module at src/plugins/next-mocks/alias/link/index.tsx — a Storybook-friendly Link mock (records click actions via fn()) plus a mockable useLinkStatus hook that defaults to { pending: false }.
  • Registered aliases in src/plugins/next-mocks/plugin.ts for:
    • next/link
    • @storybook/nextjs/link.mock
    • @storybook/nextjs-vite/link.mock
    • @storybook/experimental-nextjs-vite/link.mock
  • Build entry added in tsup.config.ts.
  • Package exports added for ./browser/mocks/link and ./node/mocks/link in package.json.

This mirrors how navigation, router, headers, and cache are wired today.

Context

Companion PRs in the main Storybook repo:

@valentinpalkovic asked me to bring the LinkMock over here since the equivalent didn't exist for nextjs-vite. See the conversation on #34593 for context.

Test plan

  • pnpm build succeeds and emits:
    • dist/plugins/next-mocks/alias/link/index.js
    • dist/plugins/next-mocks/alias/link/index.cjs
    • dist/plugins/next-mocks/alias/link/index.d.ts
    • dist/plugins/next-mocks/alias/link/index.d.cts
  • pnpm check (biome) passes clean
  • Manually verify in a Storybook sandbox that a story importing useLinkStatus from next/link no longer throws and that useLinkStatus can be overridden via parameters.nextjs.navigation / mock module to return { pending: true }.

Verifies the new useLinkStatus mock: DefaultLinkStatus asserts the
default non-pending ("Idle") state, and PendingLinkStatus overrides the
mock via @storybook/nextjs-vite/link.mock to assert the pending
("Pending") state. Mirrors the equivalent @storybook/nextjs template
stories.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@valentinpalkovic valentinpalkovic merged commit d7b543e into storybookjs:main May 19, 2026
1 of 2 checks passed
@github-project-automation github-project-automation Bot moved this from In Progress to Done in Core Team Projects May 19, 2026
@storybook-app-bot storybook-app-bot Bot mentioned this pull request May 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants