Feature request: support NextJS rewrites

[Karl O]

I might have programmed my self a bit into a corner here, but I have an app where I have the following rewrites:

async rewrites() {
    return [
        {
            source: '/',
            destination: '/null',
        },
        {
            source: '/some-route/:someId',
            destination: '/:someId',
        },
    ]
}

I do this in order to have a single page, called [someId].tsx to handle both root (e.g. no ID passed), and /some-route/some-value. This is of course a bit weird, but that's not important here. 😄 But to handle both rewrites pointing to the same page, I expect, according to the rewrites, the path parameter to be an actual string of type 'null' or an actual ID, and handle this is the code accordingly.

So naturally when testing this using jest and next-router-mock, when the application code redirects to / it would normally hit the rewrite, but in the test it doesn't. So the [someId].tsx page is rendered with an "illegal" state (illegal according to my own rewrite rules).

I could implement support for this test-only case in the application code, but I'm trying to avoid that. I also looked at using mockRouter.events.on('routeChangeStart', (evts) => {...}) as a way to handle my own rewrites, but it seems that was a dead end.

I know this is a bit of a weird case, but if anyone has any smart suggestions I'd be grateful. 😄 It would of course be cool if the dynamic routing could be configured to handle these kind of rewrites as well, but I'm not sure how that would work.

[Scott Rippey]

I'm not familiar with Next's rewrites feature, so I haven't considered how to handle this situation. So I'll just share some initial thoughts.

This library has an internally-used property on the router object, called router.pathParser:
https://github.com/scottrippey/next-router-mock/blob/main/src/MemoryRouter.tsx#L76

  pathParser: ((urlObject: UrlObjectComplete) => UrlObjectComplete) | undefined = undefined;

This is used for the "dynamic routes" feature ... but I'm thinking maybe you could use it for this custom rewrite logic?

An example:

import router from 'next-router-mock';
router.pathParser = (url) => {
  if (url.pathname === '/') {
    url.query.someId = 'null';
  }
  if (url.pathname === '/some-route/:someId') {
    url.pathname = '/:someId';
  }
  return url;
};

However, there are some difficulties with this approach ...

1. If you're already using dynamic routes, then pathParser will already be used for parsing the dynamic routes, so you can't just override it. You'd have to do something like:

const dynamicRouteParser = router.pathParser;
router.pathParser = (url) => {
  url = dynamicRouteParser(url);
  ...

2. This pathParser isn't really documented, and I consider it an "internal" ... so if we wanted to add better support for rewrites, it might get refactored ... in which case, your custom implementation would be broken.

[Scott Rippey]

I would be eager/happy to have better support for rewrites, similar to how we handle dynamic routes. It would be cool to do something like:

mockRouter.registerRewrites([ { source, destination }, ... ]);

[Karl O]

router.pathParser was kind of exactly what I was looking for. I was scrolling through the properties yesterday looking for something like that but I must have glanced over it. 🤦

Your approach of saving the original reference and creating a new pathParser completely solved my problem. Thanks for the quick and in depth response. 😄

mockRouter.registerRewrites would indeed be a cool feature.

[Scott Rippey]

After looking at the rewrite docs it's clearly not a simple implementation ... so it would probably only be possible to mock if we could import their logic (we do this for the registerPaths feature).
For now, I'm considering improving the pathParser approach to better support multiple parsers, which would make it easier to lightly mock rewrites.

[Scott Rippey]

Please see PR #50 to see how I'd like to fix this

[Scott Rippey]

@karl-run So with the above PR, this is how you'd handle mocking rewrite logic:

mockRouter.useParser((url) => {
  if (url.pathname === '/') {
    url.query.someId = 'null';
  }
  if (url.pathname === '/some-route/:someId') {
    url.pathname = '/:someId';
  }
});

What do you think?

[Karl O]

That looks pretty good! It would solve my problems.

[Scott Rippey]

Published as 0.7.0