Skip to content

Commit 74853d0

Browse files
authored
Merge pull request #2345 from ofhope/button-router-test
Button router test
2 parents 62003a9 + ac8f318 commit 74853d0

File tree

2 files changed

+12
-6
lines changed

2 files changed

+12
-6
lines changed

client/common/ButtonOrLink.test.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { render, screen, fireEvent } from '../test-utils';
2+
import { render, screen, fireEvent, waitFor, history } from '../test-utils';
33
import ButtonOrLink from './ButtonOrLink';
44

55
describe('ButtonOrLink', () => {
@@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
2525
expect(link).toHaveAttribute('href', 'https://p5js.org');
2626
});
2727

28-
it('can render an internal link with react-router', () => {
28+
it('can render an internal link with react-router', async () => {
2929
render(<ButtonOrLink href="/about">About</ButtonOrLink>);
30-
// TODO: how can this be tested? Needs a router provider?
30+
31+
const link = screen.getByText('About');
32+
fireEvent.click(link);
33+
34+
await waitFor(() => expect(history.location.pathname).toEqual('/about'));
3135
});
3236
});

client/test-utils.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,17 @@ import React from 'react';
1616
import PropTypes from 'prop-types';
1717
import { Provider } from 'react-redux';
1818
import { Router } from 'react-router-dom';
19+
import { createMemoryHistory } from 'history';
1920
import { I18nextProvider } from 'react-i18next';
2021
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
2122

22-
import browserHistory from './browserHistory';
2323
import i18n from './i18n-test';
2424
import ThemeProvider from './modules/App/components/ThemeProvider';
2525
import configureStore from './store';
2626
import theme, { Theme } from './theme';
2727

28+
export const history = createMemoryHistory();
29+
2830
// re-export everything
2931
// eslint-disable-next-line import/no-extraneous-dependencies
3032
export * from '@testing-library/react';
@@ -33,7 +35,7 @@ const Providers = ({ children }) => (
3335
// eslint-disable-next-line react/jsx-filename-extension
3436
<StyledThemeProvider theme={{ ...theme[Theme.light] }}>
3537
<I18nextProvider i18n={i18n}>
36-
<Router history={browserHistory}>{children}</Router>
38+
<Router history={history}>{children}</Router>
3739
</I18nextProvider>
3840
</StyledThemeProvider>
3941
);
@@ -51,7 +53,7 @@ function reduxRender(
5153
<I18nextProvider i18n={i18n}>
5254
<Provider store={store}>
5355
<ThemeProvider>
54-
<Router history={browserHistory}>{children}</Router>
56+
<Router history={history}>{children}</Router>
5557
</ThemeProvider>
5658
</Provider>
5759
</I18nextProvider>

0 commit comments

Comments
 (0)