docs(react-router): examples for react-router (testing-library#261)

* docs(react-router): examples for react-router - extract out "renderWithRouter" helper and explain when it is needed - add some "getBy" queries instead of just container.innerHTML assertions, to show more idiomatic RTL usage * docs(react-router): md/js syntax * docs(react-router): show wrapper option to render * docs(react-router): show memoryrouter instead of browserrouter * docs(react-router): use wrapper option

Author: alexkrolick

docs/example-react-router.md

@@ -4,10 +4,10 @@ title: React Router
 ---
 
 ```jsx
+// app.js
 import React from 'react'
 import { withRouter } from 'react-router'
 import { Link, Route, Router, Switch } from 'react-router-dom'
-import { createMemoryHistory } from 'history'
 import { render, fireEvent } from '@testing-library/react'
 
 const About = () => <div>You are on the about page</div>
@@ -32,42 +32,96 @@ function App() {
  </div>
  )
 }
+```
 
-// Ok, so here's what your tests might look like
+```jsx
+// app.test.js
+import { Router } from 'react-router-dom'
+import { createMemoryHistory } from 'history'
 
-// this is a handy function that I would utilize for any component
-// that relies on the router being in context
+test('full app rendering/navigating', () => {
+ const history = createMemoryHistory()
+ const { container, getByText } = render(
+ <Router history={history}>
+ <App />
+ </Router>
+ )
+ // verify page content for expected route
+ // often you'd use a data-testid or role query, but this is also possible
+ expect(container.innerHTML).toMatch('You are home')
+
+ fireEvent.click(getByText(/about/i))
+
+ // check that the content changed to the new page
+ expect(container.innerHTML).toMatch('You are on the about page')
+})
+
+test('landing on a bad page shows 404 page', () => {
+ const history = createMemoryHistory()
+ history.push('/some/bad/route')
+ const { getByRole } = render(
+ <Router>
+ <App />
+ </Router>
+ )
+ expect(getByRole('heading')).toHaveTextContent('404 Not Found')
+})
+
+test('rendering a component that uses withRouter', () => {
+ const route = '/some-route'
+ window.history.pushState({}, '', route)
+ const { getByTestId } = render(
+ <Router>
+ <LocationDisplay />
+ </Router>
+ )
+ expect(getByTestId('location-display').textContent).toBe(route)
+})
+```
+
+## Reducing boilerplate
+
+1. You can use the `wrapper` option to wrap a `MemoryRouter` around the component you want to render (`MemoryRouter` works when you don't need access to the history object itself in the test, but just need the components to be able to render and navigate).
+
+```jsx
+import { MemoryRouter } from 'react-router-dom'
+
+test('full app rendering/navigating', () => {
+ const { container, getByText } = render(<App />, {wrapper: MemoryRouter})
+ // verify page content for expected route
+ expect(getByRole('heading')).toMatch('Home')
+})
+```
+
+2. If you find yourself adding Router components to your tests a lot, you may want to create
+a helper function that wraps around `render`. 
+
+```jsx
+// test utils file
 function renderWithRouter(
  ui,
  {
  route = '/',
  history = createMemoryHistory({ initialEntries: [route] }),
  } = {}
 ) {
+ const Wrapper = ({children}) => <Router history={history}>{children}</Router>
  return {
- ...render(<Router history={history}>{ui}</Router>),
+ ...render(ui, {wrapper: Wrapper}),
  // 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('full app rendering/navigating', () => {
- const { container, getByText } = renderWithRouter(<App />)
- // normally I'd use a data-testid, but just wanted to show this is also possible
- expect(container.innerHTML).toMatch('You are home')
- const leftClick = { button: 0 }
- fireEvent.click(getByText(/about/i), leftClick)
- // normally I'd use a data-testid, but just wanted to show this is also possible
- expect(container.innerHTML).toMatch('You are on the about page')
-})
-
+```jsx
+// app.test.js
 test('landing on a bad page', () => {
  const { container } = renderWithRouter(<App />, {
  route: '/something-that-does-not-match',
  })
- // normally I'd use a data-testid, but just wanted to show this is also possible
  expect(container.innerHTML).toMatch('No match')
 })
 
@@ -77,3 +131,4 @@ test('rendering a component that uses withRouter', () => {
  expect(getByTestId('location-display').textContent).toBe(route)
 })
 ```
+