From 06172a0295eb4ed220f22de2559faf902c3828a8 Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Tue, 25 Feb 2020 19:59:50 -0500
Subject: [PATCH 01/12] Add setup, basic test, and link tests

---
 .../testing-with-react-testing-library.md     | 110 +++++++++++++++++-
 1 file changed, 107 insertions(+), 3 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index a91d38b9f1..5ed96a6874 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -1,8 +1,26 @@
-# Testing With React Testing Library
+# Testing With React Test Library (RTL)
 
 ## Getting Setup
 
-TODO
+This guide assumes you followed the instructions for [Adding React Router via Create React App](../../installation/add-to-a-website.md#create-react-app). If you did not start with Create React App, but still have the same application structure, you can install [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) by following [their installation guide](https://github.com/testing-library/react-testing-library#installation).
+
+## Basic Test
+
+A basic rendering test can be important to esnure that we have everything installed and set up correctly. Fortunately, this is easy to do with RTL.
+
+Since we've wrapped our `App` component in the `Router` in our `index.js` file, we do have to wrap it in each of our isolated component tests, otherwise `history` will be undefined. If the `Router` had been inside of our `App`, then we would not have to wrap it inside of our tests.
+
+A recommended simple test looks like the following:
+
+```jsx
+test('renders react router header', () => {
+  const { getByText } = render(<Router><App /></Router>);
+  const header = getByText('Welcome to React Router!');
+  expect(header).toBeInTheDocument();
+});
+```
+
+This ensures that we can render our `App` component  and that the `h1` we put in during our setup guide is in the document.
 
 ## Testing Routes and Redirects
 
@@ -10,4 +28,90 @@ TODO
 
 ## Testing Links and Navigation
 
-TODO
+Testing a link and the subsequent navigation with React Testing Library is as easy as firing a click event on the link itself and asserting on the window's location to test that it worked.
+
+This is accomplished like so:
+
+```jsx
+it('goes to about when link clicked', () => {
+  const { getByText } = render(<Router><App /></Router>);
+  
+  const aboutLink = getByText('About');
+  act(() => {
+    fireEvent.click(aboutLink);
+  });
+
+  expect(window.location.pathname).toBe('/about');
+});
+```
+
+Since our setup guide then replaces the about link with a link back to the home page, we can easily test that we end up back on the home page by triggering a second click, this time on the home link:
+
+```jsx
+it('goes to about when link clicked and then back to home when link clicked', () => {
+  const { getByText } = render(<Router><App /></Router>);
+
+  const aboutLink = getByText('About');
+  act(() => {
+    fireEvent.click(aboutLink);
+  });
+  expect(window.location.pathname).toBe('/about');
+
+  const homeLink = getByText('Home');
+  act(() => {
+    fireEvent.click(homeLink);
+  });
+  expect(window.location.pathname).toBe('/');
+});
+```
+
+This test will initially fail if we run it right after the previous test. This is because the history stack still thinks we are on the about page. To fix this, we can use Jest's `beforeEach` function to replace our history state using: `window.history.replaceState({}, '', '/');`. This makes `react-router` think that we are on the home page when we start each test. Now, all three tests should be passing when ran together.
+
+Below is the full file to help see all of the tests together:
+
+```jsx
+import React from 'react';
+import { render, fireEvent, cleanup, act } from '@testing-library/react';
+import App from './App';
+import { BrowserRouter as Router } from "react-router-dom";
+
+beforeEach(() => {
+  window.history.replaceState({}, '', '/');
+});
+
+afterEach(cleanup);
+
+test('renders react router header', () => {
+  const { getByText } = render(<Router><App /></Router>);
+  const header = getByText('Welcome to React Router!');
+  expect(header).toBeInTheDocument();
+});
+
+it('goes to about when link clicked', () => {
+  const { getByText } = render(<Router><App /></Router>);
+  
+  const aboutLink = getByText('About');
+  act(() => {
+    fireEvent.click(aboutLink);
+  });
+
+  expect(window.location.pathname).toBe('/about');
+});
+
+it('goes to about when link clicked and then back to home when link clicked', () => {
+  const { getByText } = render(<Router><App /></Router>);
+
+  const aboutLink = getByText('About');
+  act(() => {
+    fireEvent.click(aboutLink);
+  });
+  expect(window.location.pathname).toBe('/about');
+
+  const homeLink = getByText('Home');
+  act(() => {
+    fireEvent.click(homeLink);
+  });
+  expect(window.location.pathname).toBe('/');
+});
+
+```

From 8b012449637ea4b1fa9e997dc7e955c3aeda285d Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Tue, 25 Feb 2020 20:02:44 -0500
Subject: [PATCH 02/12] Fixing title

---
 .../testing/testing-with-react-testing-library.md               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index 5ed96a6874..cc474b864f 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -1,4 +1,4 @@
-# Testing With React Test Library (RTL)
+# Testing With React Testing Library (RTL)
 
 ## Getting Setup
 

From 352bdcccb602438434d4b3f94d10e973df3d3ef5 Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Thu, 5 Mar 2020 16:00:31 -0500
Subject: [PATCH 03/12] Update language used in RTL docs

This also moves the `Testing Routes and Redirects` section below `Testing Links and Navigation`
---
 .../testing/testing-with-react-testing-library.md  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index cc474b864f..a8ac53b69a 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -6,11 +6,11 @@ This guide assumes you followed the instructions for [Adding React Router via Cr
 
 ## Basic Test
 
-A basic rendering test can be important to esnure that we have everything installed and set up correctly. Fortunately, this is easy to do with RTL.
+A basic rendering test can be important to esnure that we have everything installed and set up correctly. Fortunately, this is RTL gives us the tools to accomplish this.
 
 Since we've wrapped our `App` component in the `Router` in our `index.js` file, we do have to wrap it in each of our isolated component tests, otherwise `history` will be undefined. If the `Router` had been inside of our `App`, then we would not have to wrap it inside of our tests.
 
-A recommended simple test looks like the following:
+A recommended test to ensure basic functionality looks like the following:
 
 ```jsx
 test('renders react router header', () => {
@@ -22,13 +22,9 @@ test('renders react router header', () => {
 
 This ensures that we can render our `App` component  and that the `h1` we put in during our setup guide is in the document.
 
-## Testing Routes and Redirects
-
-TODO
-
 ## Testing Links and Navigation
 
-Testing a link and the subsequent navigation with React Testing Library is as easy as firing a click event on the link itself and asserting on the window's location to test that it worked.
+Testing a link and the subsequent navigation with React Testing Library can be done by firing a click event on the link itself and asserting on the window's location to test that it worked.
 
 This is accomplished like so:
 
@@ -115,3 +111,7 @@ it('goes to about when link clicked and then back to home when link clicked', ()
 });
 
 ```
+
+## Testing Routes and Redirects
+
+TODO

From d8a23988915018e948d031699924875abc625c7a Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Thu, 5 Mar 2020 16:03:17 -0500
Subject: [PATCH 04/12] Update RTL test examples to use `screen` instead of
 destructured render

---
 .../testing-with-react-testing-library.md     | 60 ++++++++-----------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index a8ac53b69a..75112113d2 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -14,8 +14,8 @@ A recommended test to ensure basic functionality looks like the following:
 
 ```jsx
 test('renders react router header', () => {
-  const { getByText } = render(<Router><App /></Router>);
-  const header = getByText('Welcome to React Router!');
+  render(<Router><App /></Router>);
+  const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
 ```
@@ -30,12 +30,10 @@ This is accomplished like so:
 
 ```jsx
 it('goes to about when link clicked', () => {
-  const { getByText } = render(<Router><App /></Router>);
+  render(<Router><App /></Router>);
   
-  const aboutLink = getByText('About');
-  act(() => {
-    fireEvent.click(aboutLink);
-  });
+  const aboutLink = screen.getByText('About');
+  fireEvent.click(aboutLink);
 
   expect(window.location.pathname).toBe('/about');
 });
@@ -45,18 +43,16 @@ Since our setup guide then replaces the about link with a link back to the home
 
 ```jsx
 it('goes to about when link clicked and then back to home when link clicked', () => {
-  const { getByText } = render(<Router><App /></Router>);
+  render(<Router><App /></Router>);
+
+  const aboutLink = screen.getByText('About');
+  fireEvent.click(aboutLink);
 
-  const aboutLink = getByText('About');
-  act(() => {
-    fireEvent.click(aboutLink);
-  });
   expect(window.location.pathname).toBe('/about');
 
-  const homeLink = getByText('Home');
-  act(() => {
-    fireEvent.click(homeLink);
-  });
+  const homeLink = screen.getByText('Home');
+  fireEvent.click(homeLink);
+
   expect(window.location.pathname).toBe('/');
 });
 ```
@@ -67,7 +63,7 @@ Below is the full file to help see all of the tests together:
 
 ```jsx
 import React from 'react';
-import { render, fireEvent, cleanup, act } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import App from './App';
 import { BrowserRouter as Router } from "react-router-dom";
 
@@ -75,38 +71,32 @@ beforeEach(() => {
   window.history.replaceState({}, '', '/');
 });
 
-afterEach(cleanup);
-
 test('renders react router header', () => {
-  const { getByText } = render(<Router><App /></Router>);
-  const header = getByText('Welcome to React Router!');
+  render(<Router><App /></Router>);
+  const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
 
 it('goes to about when link clicked', () => {
-  const { getByText } = render(<Router><App /></Router>);
+  render(<Router><App /></Router>);
   
-  const aboutLink = getByText('About');
-  act(() => {
-    fireEvent.click(aboutLink);
-  });
+  const aboutLink = screen.getByText('About');
+  fireEvent.click(aboutLink);
 
   expect(window.location.pathname).toBe('/about');
 });
 
 it('goes to about when link clicked and then back to home when link clicked', () => {
-  const { getByText } = render(<Router><App /></Router>);
+  render(<Router><App /></Router>);
+
+  const aboutLink = screen.getByText('About');
+  fireEvent.click(aboutLink);
 
-  const aboutLink = getByText('About');
-  act(() => {
-    fireEvent.click(aboutLink);
-  });
   expect(window.location.pathname).toBe('/about');
 
-  const homeLink = getByText('Home');
-  act(() => {
-    fireEvent.click(homeLink);
-  });
+  const homeLink = screen.getByText('Home');
+  fireEvent.click(homeLink);
+
   expect(window.location.pathname).toBe('/');
 });
 

From dc28df55485ee08fc72f06d3144928eda3443ad5 Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Thu, 5 Mar 2020 16:15:20 -0500
Subject: [PATCH 05/12] Use wrapper param in RTL tests to support rerender
 function

---
 .../testing/testing-with-react-testing-library.md    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index 75112113d2..915ba72965 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -14,7 +14,7 @@ A recommended test to ensure basic functionality looks like the following:
 
 ```jsx
 test('renders react router header', () => {
-  render(<Router><App /></Router>);
+  render(<App />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
@@ -30,7 +30,7 @@ This is accomplished like so:
 
 ```jsx
 it('goes to about when link clicked', () => {
-  render(<Router><App /></Router>);
+  render(<App />, { wrapper: Router });
   
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -43,7 +43,7 @@ Since our setup guide then replaces the about link with a link back to the home
 
 ```jsx
 it('goes to about when link clicked and then back to home when link clicked', () => {
-  render(<Router><App /></Router>);
+  render(<App />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -72,13 +72,13 @@ beforeEach(() => {
 });
 
 test('renders react router header', () => {
-  render(<Router><App /></Router>);
+  render(<App />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
 
 it('goes to about when link clicked', () => {
-  render(<Router><App /></Router>);
+  render(<App />, { wrapper: Router });
   
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -87,7 +87,7 @@ it('goes to about when link clicked', () => {
 });
 
 it('goes to about when link clicked and then back to home when link clicked', () => {
-  render(<Router><App /></Router>);
+  render(<App />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);

From ba6825d8f4c6767af437688e40f3c7385cc47910 Mon Sep 17 00:00:00 2001
From: Will Harris <will.t.harris@protonmail.com>
Date: Thu, 5 Mar 2020 21:12:18 -0800
Subject: [PATCH 06/12] content: edited and added content

---
 .../testing-with-react-testing-library.md     | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index 915ba72965..79bb4141db 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -1,37 +1,47 @@
 # Testing With React Testing Library (RTL)
 
+`react-testing-library` is a lightweight family of packages that help us test UI components in a manner that resembles the way users interact with our applications.
+
+To quote their (very excellent) documentation:
+
+    The more your tests resemble the way your software is used, the more confidence they can give you.
+
+https://testing-library.com/docs/intro
+
 ## Getting Setup
 
 This guide assumes you followed the instructions for [Adding React Router via Create React App](../../installation/add-to-a-website.md#create-react-app). If you did not start with Create React App, but still have the same application structure, you can install [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) by following [their installation guide](https://github.com/testing-library/react-testing-library#installation).
 
 ## Basic Test
 
-A basic rendering test can be important to esnure that we have everything installed and set up correctly. Fortunately, this is RTL gives us the tools to accomplish this.
+A basic rendering test ensures that we have everything installed and set up correctly. Fortunately, RTL gives us the tools to accomplish this.
 
-Since we've wrapped our `App` component in the `Router` in our `index.js` file, we do have to wrap it in each of our isolated component tests, otherwise `history` will be undefined. If the `Router` had been inside of our `App`, then we would not have to wrap it inside of our tests.
+Since we've wrapped our `App` component in the `Router` in our `index.js` file, we do have to wrap it around each of our individual component tests, otherwise `history` will be undefined. If the `Router` had been inside of our `App`, then we would not have to wrap it inside of our tests.
 
 A recommended test to ensure basic functionality looks like the following:
 
 ```jsx
-test('renders react router header', () => {
+test('<App /> renders successfully', () => {
   render(<App />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
 ```
 
-This ensures that we can render our `App` component  and that the `h1` we put in during our setup guide is in the document.
+This test ensures that the `App` component renders, and that the `h1` we added during the setup guide exists in the document.
 
 ## Testing Links and Navigation
 
-Testing a link and the subsequent navigation with React Testing Library can be done by firing a click event on the link itself and asserting on the window's location to test that it worked.
+`react-router` has a lot of tests verifying that the routes work when the location changes, so you probably don't need to test this stuff.
+
+If you need to test navigation within your app, you can do so by firing a click event on the link itself and asserting that the path changed to the expected value.
 
 This is accomplished like so:
 
 ```jsx
-it('goes to about when link clicked', () => {
+it('navigates to /about', () => {
   render(<App />, { wrapper: Router });
-  
+
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
 
@@ -39,10 +49,10 @@ it('goes to about when link clicked', () => {
 });
 ```
 
-Since our setup guide then replaces the about link with a link back to the home page, we can easily test that we end up back on the home page by triggering a second click, this time on the home link:
+Since our setup guide then replaces the about link with a link back to the home page, we can test navigating back to the home page by triggering another click, this time on the home link:
 
 ```jsx
-it('goes to about when link clicked and then back to home when link clicked', () => {
+it('navigates to /about and back to /', () => {
   render(<App />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
@@ -57,15 +67,15 @@ it('goes to about when link clicked and then back to home when link clicked', ()
 });
 ```
 
-This test will initially fail if we run it right after the previous test. This is because the history stack still thinks we are on the about page. To fix this, we can use Jest's `beforeEach` function to replace our history state using: `window.history.replaceState({}, '', '/');`. This makes `react-router` think that we are on the home page when we start each test. Now, all three tests should be passing when ran together.
+This test will initially fail if it is run immediately after the previous test. This is because the history stack still thinks we are on the about page. To fix this, we can use Jest's `beforeEach` function to replace our history state using: `window.history.replaceState({}, '', '/');`. This makes `react-router` think that we are on the home page when we start each test. Now, all three tests should be passing when run together.
 
-Below is the full file to help see all of the tests together:
+Below is the full file with all of the tests together:
 
 ```jsx
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import App from './App';
-import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router } from 'react-router-dom';
 
 beforeEach(() => {
   window.history.replaceState({}, '', '/');
@@ -79,7 +89,7 @@ test('renders react router header', () => {
 
 it('goes to about when link clicked', () => {
   render(<App />, { wrapper: Router });
-  
+
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
 
@@ -99,7 +109,6 @@ it('goes to about when link clicked and then back to home when link clicked', ()
 
   expect(window.location.pathname).toBe('/');
 });
-
 ```
 
 ## Testing Routes and Redirects

From 4fd154140a4735c7999816fef729e7274ac25378 Mon Sep 17 00:00:00 2001
From: Will Harris <will.t.harris@protonmail.com>
Date: Fri, 6 Mar 2020 08:26:35 -0800
Subject: [PATCH 07/12] content: change test names

---
 .../testing/testing-with-react-testing-library.md           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index 79bb4141db..16ab942184 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -81,13 +81,13 @@ beforeEach(() => {
   window.history.replaceState({}, '', '/');
 });
 
-test('renders react router header', () => {
+test('<App /> renders successfully', () => {
   render(<App />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
 
-it('goes to about when link clicked', () => {
+it('navigates to /about', () => {
   render(<App />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
@@ -96,7 +96,7 @@ it('goes to about when link clicked', () => {
   expect(window.location.pathname).toBe('/about');
 });
 
-it('goes to about when link clicked and then back to home when link clicked', () => {
+it('navigates to /about and back to /', () => {
   render(<App />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');

From e5f95f1c03e3ece91ef16d8fc7653455b1a1eb40 Mon Sep 17 00:00:00 2001
From: Will Harris <will.t.harris@protonmail.com>
Date: Fri, 6 Mar 2020 08:57:57 -0800
Subject: [PATCH 08/12] content: add basic redirect example

---
 .../testing-with-react-testing-library.md     | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index 16ab942184..b0d656c190 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -113,4 +113,41 @@ it('navigates to /about and back to /', () => {
 
 ## Testing Routes and Redirects
 
-TODO
+Let's say that we've built a redirect component that deals with re-routing the user from `/the-old-thing` to `/the-new-thing`
+
+`RedirectHandler.js`
+```jsx
+import React from 'react'
+import {Route, Switch, Redirect} from 'react-router-dom'
+
+const RedirectHandler = props => (
+  <Switch>
+    <Redirect from="/the-old-thing" to="the-new-thing">
+  </Switch>
+)
+
+export default RedirectHandler
+```
+
+And here we have one method of testing that the redirect is behaving as expected.
+
+`RedirectHandler.test.js`
+```jsx
+import React from 'react'
+import {MemoryRouter, Route} from 'react-router-dom'
+import { render, fireEvent, screen } from '@testing-library/react';
+import RedirectHandler from './RedirectHandler'
+
+it('redirects /the-old-thing to /the-new-thing', () => {
+  render(
+    <MemoryRouter initialEntries={["/the-old-thing"]}>
+      <Route component={RedirectHandler}>
+    </MemoryRouter>
+  )
+
+  expect(window.location.pathname).toBe("/the-new-thing")
+})
+
+```
+
+This test initializes the `MemoryRouter` with an initial path of `/the-old-thing` and verifies that the `RedirectHandler` correctly changes the path to `/the-new-thing`
\ No newline at end of file

From 3533f613fa0581adc39c7a86edac394df3f96e64 Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Sat, 7 Mar 2020 08:57:09 -0500
Subject: [PATCH 09/12] Rename App to HomePage in RTL testing docs

---
 .../testing-with-react-testing-library.md     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index b0d656c190..b5288b9d25 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -16,13 +16,13 @@ This guide assumes you followed the instructions for [Adding React Router via Cr
 
 A basic rendering test ensures that we have everything installed and set up correctly. Fortunately, RTL gives us the tools to accomplish this.
 
-Since we've wrapped our `App` component in the `Router` in our `index.js` file, we do have to wrap it around each of our individual component tests, otherwise `history` will be undefined. If the `Router` had been inside of our `App`, then we would not have to wrap it inside of our tests.
+Since we've wrapped our `HomePage` (renamed from `App` after following the aforementioned instructions)  component in the `Router` in our `index.js` file, we do have to wrap it around each of our individual component tests, otherwise `history` will be undefined. If the `Router` had been inside of our `App`, then we would not have to wrap it inside of our tests.
 
 A recommended test to ensure basic functionality looks like the following:
 
 ```jsx
-test('<App /> renders successfully', () => {
-  render(<App />, { wrapper: Router });
+test('<HomePage /> renders successfully', () => {
+  render(<HomePage />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
@@ -40,7 +40,7 @@ This is accomplished like so:
 
 ```jsx
 it('navigates to /about', () => {
-  render(<App />, { wrapper: Router });
+  render(<HomePage />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -53,7 +53,7 @@ Since our setup guide then replaces the about link with a link back to the home
 
 ```jsx
 it('navigates to /about and back to /', () => {
-  render(<App />, { wrapper: Router });
+  render(<HomePage />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -74,21 +74,21 @@ Below is the full file with all of the tests together:
 ```jsx
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
-import App from './App';
+import HomePage from './HomePage';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 beforeEach(() => {
   window.history.replaceState({}, '', '/');
 });
 
-test('<App /> renders successfully', () => {
-  render(<App />, { wrapper: Router });
+test('<HomePage /> renders successfully', () => {
+  render(<HomePage />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
   expect(header).toBeInTheDocument();
 });
 
 it('navigates to /about', () => {
-  render(<App />, { wrapper: Router });
+  render(<HomePage />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -97,7 +97,7 @@ it('navigates to /about', () => {
 });
 
 it('navigates to /about and back to /', () => {
-  render(<App />, { wrapper: Router });
+  render(<HomePage />, { wrapper: Router });
 
   const aboutLink = screen.getByText('About');
   fireEvent.click(aboutLink);
@@ -150,4 +150,4 @@ it('redirects /the-old-thing to /the-new-thing', () => {
 
 ```
 
-This test initializes the `MemoryRouter` with an initial path of `/the-old-thing` and verifies that the `RedirectHandler` correctly changes the path to `/the-new-thing`
\ No newline at end of file
+This test initializes the `MemoryRouter` with an initial path of `/the-old-thing` and verifies that the `RedirectHandler` correctly changes the path to `/the-new-thing`

From 655624429bf457bd3f25f4ef1dbc4cc8e1b8d9b7 Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Sat, 7 Mar 2020 09:00:33 -0500
Subject: [PATCH 10/12] Explicitly show imports per RTL test in examples

---
 .../testing/testing-with-react-testing-library.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index b5288b9d25..eaa72a8c2d 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -21,6 +21,11 @@ Since we've wrapped our `HomePage` (renamed from `App` after following the afore
 A recommended test to ensure basic functionality looks like the following:
 
 ```jsx
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HomePage from './HomePage';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 test('<HomePage /> renders successfully', () => {
   render(<HomePage />, { wrapper: Router });
   const header = screen.getByText('Welcome to React Router!');
@@ -39,6 +44,11 @@ If you need to test navigation within your app, you can do so by firing a click
 This is accomplished like so:
 
 ```jsx
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import HomePage from './HomePage';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 it('navigates to /about', () => {
   render(<HomePage />, { wrapper: Router });
 
@@ -52,6 +62,11 @@ it('navigates to /about', () => {
 Since our setup guide then replaces the about link with a link back to the home page, we can test navigating back to the home page by triggering another click, this time on the home link:
 
 ```jsx
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import HomePage from './HomePage';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 it('navigates to /about and back to /', () => {
   render(<HomePage />, { wrapper: Router });
 

From 5bc9025eb0933525e8c48c518b9b23fc735ccefa Mon Sep 17 00:00:00 2001
From: Zachary Davis <thatzacdavis@gmail.com>
Date: Sat, 7 Mar 2020 09:13:09 -0500
Subject: [PATCH 11/12] Add working redirect test

---
 .../testing-with-react-testing-library.md     | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index eaa72a8c2d..b262a273df 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -86,6 +86,7 @@ This test will initially fail if it is run immediately after the previous test.
 
 Below is the full file with all of the tests together:
 
+`HomePage.test.js`
 ```jsx
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
@@ -133,36 +134,34 @@ Let's say that we've built a redirect component that deals with re-routing the u
 `RedirectHandler.js`
 ```jsx
 import React from 'react'
-import {Route, Switch, Redirect} from 'react-router-dom'
+import { Redirect } from 'react-router-dom'
 
-const RedirectHandler = props => (
-  <Switch>
-    <Redirect from="/the-old-thing" to="the-new-thing">
-  </Switch>
-)
+const RedirectHandler = () => (<Redirect from="/the-old-thing" to="the-new-thing"></Redirect>);
 
-export default RedirectHandler
+export default RedirectHandler;
 ```
 
 And here we have one method of testing that the redirect is behaving as expected.
 
 `RedirectHandler.test.js`
 ```jsx
-import React from 'react'
-import {MemoryRouter, Route} from 'react-router-dom'
-import { render, fireEvent, screen } from '@testing-library/react';
-import RedirectHandler from './RedirectHandler'
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { render } from "@testing-library/react";
+import RedirectHandler from "./RedirectHandler";
+
+it("redirects /the-old-thing to /the-new-thing", () => {
+  window.history.pushState({}, "The Old Thing", "/the-new-thing");
 
-it('redirects /the-old-thing to /the-new-thing', () => {
   render(
-    <MemoryRouter initialEntries={["/the-old-thing"]}>
-      <Route component={RedirectHandler}>
-    </MemoryRouter>
-  )
+    <BrowserRouter>
+      <RedirectHandler />
+    </BrowserRouter>
+  );
 
-  expect(window.location.pathname).toBe("/the-new-thing")
-})
+  expect(window.location.pathname).toBe("/the-new-thing");
+});
 
 ```
 
-This test initializes the `MemoryRouter` with an initial path of `/the-old-thing` and verifies that the `RedirectHandler` correctly changes the path to `/the-new-thing`
+This test initializes the `BrowserRouter` with an initial path of `/the-old-thing` and verifies that the `RedirectHandler` correctly changes the path to `/the-new-thing`.

From 995e31342a35b28355f23c38f22d17370d127007 Mon Sep 17 00:00:00 2001
From: Will Harris <will.t.harris@protonmail.com>
Date: Sun, 8 Mar 2020 09:16:37 -0700
Subject: [PATCH 12/12] refactor RedirectHandler component

---
 .../testing/testing-with-react-testing-library.md               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/advanced-guides/testing/testing-with-react-testing-library.md b/docs/advanced-guides/testing/testing-with-react-testing-library.md
index b262a273df..f0280b9feb 100644
--- a/docs/advanced-guides/testing/testing-with-react-testing-library.md
+++ b/docs/advanced-guides/testing/testing-with-react-testing-library.md
@@ -136,7 +136,7 @@ Let's say that we've built a redirect component that deals with re-routing the u
 import React from 'react'
 import { Redirect } from 'react-router-dom'
 
-const RedirectHandler = () => (<Redirect from="/the-old-thing" to="the-new-thing"></Redirect>);
+const RedirectHandler = () => <Redirect from="/the-old-thing" to="the-new-thing" />;
 
 export default RedirectHandler;
 ```