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? 🙂