Fix existing tests

Author: afontcu

Diff for: src/__tests__/plugins.js

@@ -1,26 +1,38 @@
-// Please notice that this example is a draft example on how to test
-// the router.
-// Related issue on Vue Test Utils: https://github.com/vuejs/vue-test-utils-next/issues/152
+/* eslint-disable vue/require-prop-types */
+/* eslint-disable vue/one-component-per-file */
 
 import '@testing-library/jest-dom'
 import {waitFor} from '@testing-library/dom'
+import {defineComponent} from 'vue'
+import {createRouter, createWebHistory} from 'vue-router'
 import {render, fireEvent} from '..'
 import App from './components/Router/App.vue'
 import Home from './components/Router/Home.vue'
 import About from './components/Router/About.vue'
 
-const routes = [
-  {path: '/', component: Home},
-  {path: '/about', component: About},
-]
+test('full app rendering/navigating from base URL', async () => {
+  // Create a Router instance
+  // https://next.router.vuejs.org/api/#createrouter
+  // using the a HTML5 history.
+  // https://next.router.vuejs.org/api/#createwebhistory
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      {path: '/', component: Home},
+      {path: '/about', component: About},
+    ],
+  })
 
-test('full app rendering/navigating', async () => {
-  // Notice how we pass a `routes` object to our render function.
-  const {findByText, getByText, getByTestId} = render(App, {routes})
+  const {findByText, getByText, getByTestId} = render(App, {
+    global: {
+      plugins: [router],
+    },
+  })
 
   // Vue Router navigation is async, so we need to wait until the
   // initial render happens
   expect(await findByText('You are home')).toBeInTheDocument()
+  expect(getByTestId('location-display')).toHaveTextContent('/')
 
   await fireEvent.click(getByTestId('about-link'))
 
@@ -32,3 +44,36 @@ test('full app rendering/navigating', async () => {
 
   expect(getByText('You are on the about page')).toBeInTheDocument()
 })
+
+test('sets router initial state', async () => {
+  const Component = defineComponent({
+    props: ['to'],
+    template: `<router-link :to="to">Learn More</router-link>`,
+  })
+
+  const route = {
+    name: 'routeName',
+    path: '/',
+    component: defineComponent({template: `<div></div>`}),
+  }
+
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [route],
+  })
+
+  const to = {name: route.name}
+
+  const {getByText} = render(Component, {
+    props: {to},
+    global: {
+      plugins: [router],
+    },
+  })
+
+  // We need to wait for router to complete the initial navigation.
+  await router.isReady()
+
+  const button = getByText('Learn More')
+  expect(button).toHaveAttribute('href', route.path)
+})

Diff for: src/__tests__/vue-router-mocha.js

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom'
+import {createStore} from 'vuex'
 import {render, fireEvent} from '..'
 import VuexTest from './components/Store/VuexTest'
 import {store} from './components/Store/store'
@@ -10,10 +11,15 @@ import {store} from './components/Store/store'
 // Tests should be completely isolated from one another.
 // Read this for additional context: https://kentcdodds.com/blog/test-isolation-with-react
 function renderVuexTestComponent(customStore) {
-  // Render the component and merge the original store and the custom one
-  // provided as a parameter. This way, we can alter some behaviors of the
-  // initial implementation.
-  return render(VuexTest, {store: {...store, ...customStore}})
+  // Create a custom store with the original one and the one coming as a
+  // parameter. This way we can alter some of its values.
+  const mergedStore = createStore({...store, ...customStore})
+
+  return render(VuexTest, {
+    global: {
+      plugins: [mergedStore],
+    },
+  })
 }
 
 test('can render with vuex with defaults', async () => {
@@ -26,7 +32,7 @@ test('can render with vuex with defaults', async () => {
 
 test('can render with vuex with custom initial state', async () => {
   const {getByTestId, getByText} = renderVuexTestComponent({
-    state: {count: 3},
+    state: () => ({count: 3}),
   })
 
   await fireEvent.click(getByText('-'))
@@ -37,17 +43,21 @@ test('can render with vuex with custom initial state', async () => {
 test('can render with vuex with custom store', async () => {
   // This is a silly store that can never be changed.
   // eslint-disable-next-line no-shadow
-  const store = {
-    state: {count: 1000},
+  const store = createStore({
+    state: () => ({count: 1000}),
     actions: {
       increment: () => jest.fn(),
       decrement: () => jest.fn(),
     },
-  }
+  })
 
   // Notice how here we are not using the helper rendering method, because
   // there's no need to do that here. We're passing a whole store.
-  const {getByTestId, getByText} = render(VuexTest, {store})
+  const {getByTestId, getByText} = render(VuexTest, {
+    global: {
+      plugins: [store],
+    },
+  })
 
   await fireEvent.click(getByText('+'))
   expect(getByTestId('count-value')).toHaveTextContent('1000')