Merge pull request #2345 from ofhope/button-router-test

Button router test

Author: lindapaiste

client/common/ButtonOrLink.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '../test-utils';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
 import ButtonOrLink from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
@@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
     expect(link).toHaveAttribute('href', 'https://p5js.org');
   });
 
-  it('can render an internal link with react-router', () => {
+  it('can render an internal link with react-router', async () => {
     render(<ButtonOrLink href="/about">About</ButtonOrLink>);
-    // TODO: how can this be tested? Needs a router provider?
+
+    const link = screen.getByText('About');
+    fireEvent.click(link);
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/about'));
   });
 });

client/test-utils.js

@@ -16,15 +16,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 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 ThemeProvider from './modules/App/components/ThemeProvider';
 import configureStore from './store';
 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';
@@ -33,7 +35,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>
 );
@@ -51,7 +53,7 @@ function reduxRender(
       <I18nextProvider i18n={i18n}>
         <Provider store={store}>
           <ThemeProvider>
-            <Router history={browserHistory}>{children}</Router>
+            <Router history={history}>{children}</Router>
           </ThemeProvider>
         </Provider>
       </I18nextProvider>