[v6] feature proposal: Allow to inject history || Discussion: Testing alternatives

[IagoLast]

One of the breaking changes since version v4-v5 with respect to V6 is the way to build the Router.

In older versions, the router accepts a "history" object as a parameter:

// v4-v5
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";

const customHistory = createBrowserHistory();

ReactDOM.render(<Router history={customHistory} />, node);

while in v6 this option is not longer available.

---

Although it seems silly, this was tremendously useful when doing automatic tests, especially with respect to routes. In our case we have a test-wrapper that injects a router into the tests and allows us to easily test different behaviors.

Example of test using {history}:

it('should redirect to the 500 error page when server returns a 500 error', async () => {
	// Wrapper over mock service worker to spy on the next server request
	mockServer.stubJSONResponse({
		method: 'post',
		path: '*/v1/developer/signin',
		response: { code: 123, message: 'dummy_error_message' },
		status: 500,
	});

	// We render the page using the testRender utility
	const { history } = testRender(LoginPage);

	// Act on the inputs
	await type(screen.queryByLabelText('Email') as HTMLInputElement, '[email protected]');
	await type(screen.queryByLabelText('Password') as HTMLInputElement, 'dummy_password');
	// Click on the login button. Try to login against the server.
	userEvent.click(screen.getByRole('button', { name: 'Log in' }));

	// We know the server response, we expect the location to be the 500 error page
	return waitFor(() => {
		expect(history.location.pathname).toEqual(ERROR_ROUTE);
	});
});

Fragment of the testRender function:

export default function testRender(
	Component: React.ElementType,
	{ route = '/', path = '/', session = null, props = {} }: ITestRenderOptions = DEFAULT_VALUE
) {

	// Create a fresh history and set the current URL
	const history = createMemoryHistory();
	history.push(route);
	// Render the given component using the HOC
	const WrappedComponent = WithTestRouter({ Component, history, path, route, session, props });
        // Render the component using testing library
	const renderResults = render(<WrappedComponent />);

	return { ...renderResults, history, WrappedComponent };
}

export function WithTestRouter({ Component, props, ...options }: ITestRouterProps) {
	return function TestRouter() {
		return (
			<Router history={options.history}>
				<Switch>
					<Route path={options.path}>
						<Component {...props} />
					</Route>
				</Switch>
			</Router>
		);
	};
}

---

We assume that retrieving this feature is not in the roadmap. If so, what would be the appropriate alternative for testing?

cc @kentcdodds I'm sure you have something to say here :D

[kentcdodds]

I don't recommend using the memory history. Your tests should use the same router your app uses. I answered this question in office hours last week right about here: https://youtu.be/GessP-lJoww?t=270

Hope that helps!

[IagoLast]

Ok, works like a charm:

Solution:

• Use a BrowserRouter on the testRender utility
  • setup initial conditions with window.history.replaceState({}, '', route);
• Rely on window.location and window.history to perform assertions

---

Thank you very much again Kent, I am impressed not only that you attend to the thousands of notifications that you must have but also that you do it in minutes and actually solving the problem.

I Hope you have a great day ❤️

[davesteinberg]

This works great for just setting the path, but I can't get it to work where my rendering depends on state.

I tried:

window.history.pushState({ someprop: "somevalue" }, "", "/somepath");

I see my state object when I console.log(window.history.state), but then inside the render, my component under test calls useLocation() and receives this:

location: {
      pathname: '/somepath',
      search: '',
      hash: '',
      state: null,
      key: 'default'
    }

Have you ever used this approach to set state? Any idea what might be going wrong for me?

[IagoLast]

Lol just spammed Kent on twitter and it turns he already replied.

<3

I'll try to do it BrowserHistory spying on window.location 🧠

[kentcdodds]

Why do you need to spy on window.location?

[IagoLast]

I meant "asserting on the location value" 😅

---

(Full code on first message)

...
return waitFor(() => {
  // Use window.location.pathname instead
  expect(history.location.pathname).toEqual(ERROR_ROUTE);
});
...

history is the browser history we got from the testRender utility. I'll try to use a browserRouter instead and test if we can assert on window.location 🧠

[mjackson]

I use a <MemoryRouter> in all of our tests to avoid the need to assert based on window.location state. See e.g. these tests for <Link> click behavior: https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/__tests__/link-click-test.tsx

This way I can avoid testing what the history library is doing and just scope my tests to testing what the router is doing. If there's a bug in the history library, that's a separate issue.

[kentcdodds]

For those of us who aren't working at that low-level, it's much better and more reliable to work with the real browser. I think it makes sense for RR tests to use the MemoryRouter though :) But I've been recommending using a regular BrowserRouter to devs for years and they always come back with something like "Ok, works like a charm:" 😅 or "Such a simple solution... you just don't think of it" 😆

Personally, I'd recommend the docs be updated to suggest this approach.

[mjackson]

I think both strategies are valid. It just really depends on what you're trying to test.

I think about "memory" routing like a mock for the address bar, similar to how you might use a mock for your database or a network request. You don't really want to talk to the network in your test because all sorts of things could go wrong that aren't really related to the test you're trying to write. So you use a mock instead. A memory router does the same thing for the address bar.

[kentcdodds]

For application developers, I understand why we'd want to mock the database or network requests, but why do we need the address bar mocked?

[martinkadlec0]

Is there any way how to inject custom history to Router in react-router 6? With custom frameworks and deeper integrations this is crucial.

Edit:
In our case, we needed access to the history object before first render to pass it into our DI Container. Turns out the BrowserRouter implementation is quite simple and it can be easily modified to receive history from props rather than it being created inside the component:

// "HistoryRouter" implementation
import * as React from 'react'
import type {BrowserHistory} from 'history'
import {Router} from 'react-router-dom'

export interface HistoryRouterProps {
  history: BrowserHistory
  basename?: string
  children?: React.ReactNode
}

export function HistoryRouter({
  basename,
  children,
  history,
}: HistoryRouterProps) {
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  })

  React.useLayoutEffect(() => history.listen(setState), [history])

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  )
}


// Use
import {createBrowserHistory} from 'history'
const history = createBrowserHistory()

ReactDOM.render(
    <HistoryRouter history={history}>
        ...
    </HistoryRouter>
, root)

https://codesandbox.io/s/2hdb8?file=/src/index.js

Edit 2:
Actually, as of v6.1.0 HistoryRouter is part of react-router-dom 🎉
import {HistoryRouter} from 'react-router-dom'

[jamespagedev]

typescript error Module '"history"' has no exported member 'BrowserHistory'

[meetmakwana19]

Update your history package ( npm i history if you're using npm) to the latest and refresh or restart your IDE.

[meetmakwana19]

Hey @martinkadlerec0 dont you think we should import HistoryRouter like :

import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

because Module '"react-router-dom"' declares 'HistoryRouter' locally, but it is exported as 'unstable_HistoryRouter'