Next.js router mock

router.js

// Place in __mocks__/next/
import React, { useState } from 'react';

let route = '';
// Set before running test
export const setRoute = _route => {
  route = _route;
};

/*
 * Returns:
 *     {
 *         path: string
 *         params: {
 *           [string] : string
 *         }
 *      }
 * */
const urlToObj = (url = null) => {
  const [path, queryParams = ''] = url
    ? url.split('?')
    : window.location.href.split('?');
  const params = queryParams.split('&').reduce((allParams, param) => {
    const [key, val] = param.split('=');
    return { ...allParams, [key]: unescape(val) };
  }, {});
  return { path, params };
};

const escapeUrl = url => {
  const { path, params } = urlToObj(url);
  return `${path}?${Object.entries(params)
    .map(([key, val]) => `${key}=${escape(val)}`)
    .join('&')}`;
};

const router = {
  replace: href =>
    window.history.replaceState({}, 'Test title', escapeUrl(href)),
  push: href => window.history.pushState({}, 'Test title', escapeUrl(href)),
};

const Router = ({ method }) => router[method]();

Router.replace = router.replace;
Router.push = router.push;

export const withRouter = Component => props => {
  const [, setRerender] = useState();
  const { params: query } = urlToObj();
  const _router = {
    route,
    pathname: 'mocked-path',
    query,
    asPath: '',
    replace: href => {
      router.replace(href);
      setRerender(Math.random());
    },
    push: href => {
      router.push(href);
      setRerender(Math.random());
    },
  };

  return <Component {...props} router={_router} />;
};

export default Router;