From 7579b2332bb3c92c274372badd2d617410c038ad Mon Sep 17 00:00:00 2001
From: Ben Limmer <ben@benlimmer.com>
Date: Wed, 30 Jun 2021 09:16:53 -0600
Subject: [PATCH] docs(vue): update faq for Vue Router abstract mode

---
 docs/vue-testing-library/faq.mdx | 66 +++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/docs/vue-testing-library/faq.mdx b/docs/vue-testing-library/faq.mdx
index b1788340c..21593567d 100644
--- a/docs/vue-testing-library/faq.mdx
+++ b/docs/vue-testing-library/faq.mdx
@@ -90,40 +90,62 @@ environment in between test invocations, so route transitions from previous
 tests can leak into subsequent tests, even though a new Vue Router is created
 with each call to `render`.
 
-You can work around this in one of two ways:
-
-1. **Pass an instantiated router using `abstract` mode**. `abstract` mode does
-   not store route information on `window`, so transitions will not leak between
-   tests. For example:
+To work around this issue, pass an instantiated router using `abstract` mode.
+`abstract` mode does not store route information on the JSDOM `window`, so
+routing information will not leak between tests. For example:
 
 ```js
-import { render, fireEvent } from '@testing-library/vue'
+import { render } from '@testing-library/vue'
 import Component from './Component.vue'
 import VueRouter from 'vue-router'
 
-test('uses abstract mode for the router', () => {
-  render(Component, {
-    routes: new VueRouter({
-      mode: 'abstract',
-      routes: [
-        // Your routes here
-      ],
-    }),
+test('uses abstract mode for the router', async () => {
+  const router = new VueRouter({
+    mode: 'abstract',
+    routes: [
+      // Your routes here
+    ],
+  })
+
+  const renderResult = render(Component, {
+    routes: router,
   })
+
+  // Unlike the router in `hash` mode, the initial routing stack is empty. So,
+  // you need to push an initial route to the stack.
+  await router.push('/')
 })
 ```
 
-2. **Reset the window location `afterEach`**. If you don't want to pass an
-   instantiated Router, you can instead reset the `window.location` after each
-   test, like this:
+To reduce boilerplate, you can create a custom render function to use throughout
+your test suite. For example:
 
 ```js
-afterEach(() => {
-  window.location.replace('http://localhost')
-})
-```
+// test-utils.js
 
-This will clear any route transitions stored in the `window` location property.
+import { render } from '@testing-library/vue'
+import VueRouter from 'vue-router'
+
+export async function renderApp(component, options) {
+  const router = new VueRouter({
+    mode: 'abstract',
+    routes: [
+      // Your routes here
+    ],
+  })
+
+  const renderResult = render(component, {
+    routes: router,
+    ...options,
+  })
+
+  // Unlike the router in `hash` mode, the initial routing stack is empty. So,
+  // you need to push an initial route to the stack.
+  await router.push('/')
+
+  return renderResult
+}
+```
 
 </details>