next-router-mock icon indicating copy to clipboard operation
next-router-mock copied to clipboard

Published 20 hours ago • verified publisher icon scottrippey

Next 13 App Router Support (`next/navigation`)

Open scottrippey opened this issue 1 year ago • 11 comments

This PR adds support for Next 13's new App Router. It supplies functional mocks for the hooks in next/navigation.

TODO

  • [x] Implement useRouter, usePathname, useParams, useSearchParams hooks
  • [x] Add unit tests
  • [ ] lAdd the App Context Provider to the MemoryRouterProvider, for Storybook
  • [x] Implement useSelectedLayoutSegment, useSelectedLayoutSegments hooks as noops
  • [ ] Consider how to implement API for mocking useSelectedLayoutSegment(s)
  • [ ] Consider how to implement mocks for other non-hook utils in next/navigation
  • [ ] Add new entry point, next-router-mock/navigation
  • [ ] Update docs

scottrippey avatar Aug 15 '23 22:08 scottrippey

🦋 Changeset detected

Latest commit: 8021d339464c7d670ca48a48070c766bc214ccba

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
next-router-mock Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

changeset-bot[bot] avatar Aug 15 '23 22:08 changeset-bot[bot]

Any idea when this might be completed? 😅

kaufmann42 avatar Sep 11 '23 21:09 kaufmann42

👀

italogama avatar Sep 15 '23 01:09 italogama

Beside the use* functions, next/navigation also provides:

tkrotoff avatar Oct 06 '23 00:10 tkrotoff

Since I was interested in using this library for mocking useRouter in Next13+, I briefly looked in to get tests passing on a commit if it helps: https://github.com/scottrippey/next-router-mock/compare/next/navigation...rob2d:next-router-mock:next/navigation

Based on the check for the methods, it seemed the intention at least in one of the fixes was to simply wrap/reference the original singleton routers' instances.

Wouldn't mind chipping in but didn't want to do anything potentially redundant or unwanted since I'm not totally familiar with things. Is any specific help needed or wanted?

rob2d avatar Nov 17 '23 00:11 rob2d

Is this package usable with NextJS 14?

SalahAdDin avatar Apr 08 '24 21:04 SalahAdDin

is this dead?

MarkLyck avatar Jun 25 '24 12:06 MarkLyck

@scottrippey are you here?

SalahAdDin avatar Jun 25 '24 15:06 SalahAdDin

I do not currently have the extra bandwidth to finish this PR, I'm sorry! I'd be happy to accept incoming PRs.

This PR is only partially complete. I've added support for the main 4 hooks, but there's still a lot of API methods that are not implemented. I'm willing to merge this as-is, since it will likely unblock many. However, the documentation is lacking, and the missing API methods would be frustrating.

Also I'd be happy to accept incoming PRs, if anyone wants to contribute!

scottrippey avatar Jun 26 '24 18:06 scottrippey

Perhaps someone will find this useful and will have time to dig into this. Here is how storybook implemented their mocks for navigation: Link

oleg-kuibar avatar Jul 04 '24 08:07 oleg-kuibar

Perhaps someone will find this useful and will have time to dig into this. Here is how storybook implemented their mocks for navigation: Link

So, we could use those mocks instead of this package, right?

SalahAdDin avatar Jul 04 '24 14:07 SalahAdDin