test: clean up history

Author: Alexis

client/common/ButtonOrLink.test.jsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import { browserHistory, Route, Router } from 'react-router';
-import { Provider } from 'react-redux';
-import configureStore from '../store';
-import { render, screen, fireEvent, waitFor } from '../test-utils';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
 import ButtonOrLink from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
@@ -29,27 +26,11 @@ describe('ButtonOrLink', () => {
   });
 
   it('can render an internal link with react-router', async () => {
-    const store = configureStore();
-    render(
-      <Provider store={store}>
-        <Router
-          history={browserHistory}
-          routes={
-            <Route
-              path="/"
-              component={() => <ButtonOrLink href="/about">About</ButtonOrLink>}
-            />
-          }
-        />
-      </Provider>
-    );
+    render(<ButtonOrLink href="/about">About</ButtonOrLink>);
 
     const link = screen.getByText('About');
     fireEvent.click(link);
-    await waitFor(() =>
-      expect(browserHistory.getCurrentLocation()).toEqual(
-        expect.objectContaining({ pathname: '/about' })
-      )
-    );
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/about'));
   });
 });

client/test-utils.js

@@ -17,15 +17,17 @@ import PropTypes from 'prop-types';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider as StyledThemeProvider } from 'styled-components';
 
-import browserHistory from './browserHistory';
 import i18n from './i18n-test';
 import rootReducer from './reducers';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import theme, { Theme } from './theme';
 
+export const history = createMemoryHistory();
+
 // re-export everything
 // eslint-disable-next-line import/no-extraneous-dependencies
 export * from '@testing-library/react';
@@ -34,7 +36,7 @@ const Providers = ({ children }) => (
   // eslint-disable-next-line react/jsx-filename-extension
   <StyledThemeProvider theme={{ ...theme[Theme.light] }}>
     <I18nextProvider i18n={i18n}>
-      <Router history={browserHistory}>{children}</Router>
+      <Router history={history}>{children}</Router>
     </I18nextProvider>
   </StyledThemeProvider>
 );
@@ -56,7 +58,7 @@ function reduxRender(
       <I18nextProvider i18n={i18n}>
         <Provider store={store}>
           <ThemeProvider>
-            <Router history={browserHistory}>{children}</Router>
+            <Router history={history}>{children}</Router>
           </ThemeProvider>
         </Provider>
       </I18nextProvider>