test("Nav - successfully navigates around", () => { const history = createMemoryHistory(); const { getByText } = render( <Router history={history}> <Nav /> </Router> ); fireEvent.click(getByText(/about/i)); expect(history.location.pathname).toBe("/about"); });
describe(`history-prop-types`, () => { describe('each history implementation pass the type checking in the course of its lifecycle', () => { historyLifecycleTypeChecking(createMemoryHistory(), 'memory history'); }); });
const renderWithRouter = (component) => { const history = createMemoryHistory(); return { ...render( <Router history={history}> {component} </Router> ) } }
export default function serverSideRender() { const history = createMemoryHistory(); const store = setupStore(history); const state = store.getState(); const rendered = renderToString( <Provider store={store}> <ConnectedRouter history={history}> <Router /> </ConnectedRouter> </Provider>, ); const page = template .replace('<!-- CONTENT -->', rendered) .replace('"-- STORES --"', JSON.stringify(state)); return page; }
test('renders home and navigates to accessibility forms page', () => { const history = createMemoryHistory({ initialEntries: ['/'] }); const { getByRole, getByTestId } = render( <Router history={history}> <Home /> </Router> ); const accFormLink = getByTestId(/accessibility/i); expect(getByRole('heading')).toHaveTextContent(/demos/i); fireEvent.click(accFormLink); const pathname = history.entries[history.entries.length - 1].pathname; expect(pathname).toMatch(/accessibility/i); // assert its a match });
// SHOWS EXAMPLE OF RENDERING AND SWITCHING BETWEEN ROUTES test('main renders about and home and I can navigate to those pages', () => { const history = createMemoryHistory({ initialEntries: ['/'] }); const { getByRole, getByText } = render( <Router history={history}> <Main /> </Router> ); expect(getByRole('heading')).toHaveTextContent(/home/i); fireEvent.click(getByText(/about/i)); expect(getByRole('heading')).toHaveTextContent(/about/i); });
// const greetLoaderLink = getByText(/loader/i); // const hiddenMessLink = getByText(/message/i); // const postEditorLink = getByText(/editor/i); test('trying to route to a bad link renders NoMatch page', () => { const history = createMemoryHistory({ initialEntries: ['/bad-link'] }); render( <Router history={history}> <Home /> </Router> ); const pathname = history.entries[history.entries.length - 1].pathname; expect(pathname).toMatch('/bad-link'); // assert its a match });
const renderWithReduxAndRouter = component => { const history = createMemoryHistory({ initialEntries: ['/'] }); return { ...render( <Provider store={store}> <Router history={history}> {component} </Router> </Provider> ), store, } }
// SHOWS EXAMPLE OF RENDERING AND SWITCHING BETWEEN BAD ROUTE PATH test('landing on a bad page shows no match component', () => { const history = createMemoryHistory({ initialEntries: ['/something-that-does-not-match'] }); const { getByRole } = render( <Router history={history}> <Main /> </Router> ); expect(getByRole('heading')).toHaveTextContent(/404/i); });
test("About - navigate to users page", () => { const history = createMemoryHistory(); const { getByText } = render( <Router history={history}> <About /> </Router> ); fireEvent.click(getByText("Go to User Page")); expect(history.location.pathname).toBe("/users"); });
describe(`history-prop-types`, () => { describe('each history implementation pass the type checking in the course of its lifecycle', () => { historyLifecycleTypeChecking(createMemoryHistory(), 'memory history'); }); });
const renderWithRouter = (component, { route = '/', history = createMemoryHistory({ initialEntries: [route] }), } = {}) => { return { ...render(<Router history={history}>{component}</Router>), history } }
// SHOWS EXAMPLE OF RENDERING AND SWITCHING BETWEEN ROUTES test('main renders about and home and I can navigate to those pages', () => { const history = createMemoryHistory({ initialEntries: ['/'] }); const { getByRole, getByText } = render( <Router history={history}> <Main /> </Router> ); expect(getByRole('heading')).toHaveTextContent(/home/i); fireEvent.click(getByText(/about/i)); expect(getByRole('heading')).toHaveTextContent(/about/i); });
// Ok, so here's what your tests might look like // this is a handy function that I would utilize for any component // that relies on the router being in context function renderWithRouter( ui, {route = '/', history = createMemoryHistory({initialEntries: [route]})} = {}, ) { return { ...render(<Router history={history}>{ui}</Router>), // adding `history` to the returned utilities to allow us // to reference it in our tests (just try to avoid using // this to test implementation details). history, } }
test('renders home and navigates to favorite numbers page', () => { // creates own instance of history for testing purposes - root route is Home const history = createMemoryHistory({ initialEntries: ['/'] }); const { getByRole, getByText, getByTestId, getByLabelText, debug } = render( // Router is needed to wrap the component when routing links <Router history={history}> <Home /> </Router> ); // the Favorite Number icon const faveNumIcon = getByTestId(/favorite/i); // assert we're on the homepage = role is heading for the h3 that has the text "React Testing Library Demos" expect(getByRole('heading')).toHaveTextContent(/demos/i); // click event on link to go to the favorite number page fireEvent.click(faveNumIcon); // pushes the route path to history // get the last pathname const pathname = history.entries[history.entries.length - 1].pathname; expect(pathname).toMatch(/favorite/i); // assert its a match });