Export createMemoryHistory in v7

[niksauer]

It would be great if v7 continued to export the createMemoryHistory function, similar to UNSAFE_createBrowserHistory. We currently require this in order to test our custom method for preserving search params, regardless of the interaction method used (i.e. <Link /> or navigate). I'm happy to replace our approach with a createBrowserRouter-native one but I can't seem to find an extension point that gives this same reliable behavior? AFAIK, any alternative would involve manually specifying the destination search string.

function preserveSearchParams(history: History, params: string[]): History {
  function preserve(path: To): To {
    if (typeof path === 'string') {
      path = parsePath(path);
    }

    const previousSearchParams = new URLSearchParams(history.location.search);

    if (Array.from(previousSearchParams.keys()).length === 0) {
      return path;
    }

    const newSearchParams = new URLSearchParams(path.search);

    for (const paramName of params) {
      if (newSearchParams.has(paramName)) {
        // Skip to prevent overwriting new value
        continue;
      }

      const paramValue = previousSearchParams.get(paramName) ?? undefined;

      if (!paramValue) {
        continue;
      }

      newSearchParams.set(paramName, paramValue);
    }

    if (Array.from(newSearchParams.keys()).length === 0) {
      return path;
    }

    return { ...path, search: `?${newSearchParams.toString()}` };
  }

  const oldPush = history.push;
  const oldReplace = history.replace;

  history.push = (path, state) => oldPush.apply(history, [preserve(path), state]);
  history.replace = (path, state) => oldReplace.apply(history, [preserve(path), state]);

  return history;
}

const PreserveSearchParamsBrowserRouter: FunctionComponent = (props) => {
  // ===========
  // Render
  // -----------
  return (
    <HistoryRouter
      history={preserveSearchParams(createBrowserHistory({ window, v5Compat: true }), [
        URLSearchParamName.Client,
      ])}
      {...props}
    />
  );
};

export const TESTING_EXPORT = {
  preserveSearchParams,
};

export default PreserveSearchParamsBrowserRouter;

import {
  UNSAFE_createMemoryHistory as createMemoryHistory,
  HistoryRouterProps,
} from 'react-router';
import { beforeEach, describe, expect, it } from 'vitest';

import { TESTING_EXPORT } from './PreserveSearchParamsBrowserRouter';

const { preserveSearchParams } = TESTING_EXPORT;

type History = HistoryRouterProps['history'];

describe('preserveSearchParams', () => {
  // MARK: - Helper
  let history: History;

  // MARK: - Setup
  beforeEach(() => {
    history = preserveSearchParams(createMemoryHistory(), ['keepA', 'keepC']);
  });

  // MARK: - Test Cases
  it('preserves the specified set of search parameters upon navigation', () => {
    history.push({
      pathname: '/',
      search: `?${new URLSearchParams({ keepA: 'valueA', keepC: 'valueC' }).toString()}`,
    });

    let searchParams = new URLSearchParams(history.location.search);
    expect(Array.from(searchParams.keys())).toEqual(['keepA', 'keepC']);

    history.push({ pathname: '/security' });
    expect(history.location.pathname).toEqual('/security');

    searchParams = new URLSearchParams(history.location.search);
    expect(Array.from(searchParams.keys())).toEqual(['keepA', 'keepC']);
    expect(searchParams.get('keepA')).toEqual('valueA');
    expect(searchParams.get('keepC')).toEqual('valueC');
  });
})

[joaofmartinho]

did you find the best way to test the query params?

[niksauer]

I'm not sure what you are referring to? 🙂

[morbidick]

Hi, we have a similar usecase where we test custom SearchParams handling with the help from the HistoryRouter. therefore an export of the History type (which in v6 was compatible with the one from the history package) and createHistoryRouter would be extremely helpful.
Or is there another way to test the resulting location?