test: setup vue testing library

package.json

@@ -32,7 +32,6 @@
     "@typescript-eslint/parser": "^4.15.2",
     "@vitejs/plugin-vue": "^1.1.4",
     "@vue/compiler-sfc": "^3.0.5",
-    "@vue/test-utils": "^2.0.0-rc.1",
     "babel-jest": "^26.6.3",
     "concurrently": "^6.0.0",
     "cypress": "^6.5.0",

src/components/AppFooter.spec.ts

@@ -1,9 +1,17 @@
 import { render } from '@testing-library/vue'
 import AppFooter from './AppFooter.vue'
+import registerGlobalComponents from '../plugins/global-components'
+import { router } from '../router'
 
 describe('# AppFooter', () => {
+  beforeEach(async () => {
+    await router.push({ name: 'global-feed' })
+  })
+
   it('should render correctly', () => {
-    const { container } = render(AppFooter)
+    const { container } = render(AppFooter, {
+      global: { plugins: [registerGlobalComponents, router] },
+    })
 
     expect(container).toBeInTheDocument()
   })

src/components/AppLink.spec.ts

@@ -1,24 +1,24 @@
 import AppLink from './AppLink.vue'
 import { fireEvent, render, waitFor } from '@testing-library/vue'
-import { routerForTests } from '../utils/test/mock-router'
+import { router } from '../router'
 
-describe('# AppLink', function () {
+describe('# AppLink', () => {
   beforeEach(async () => {
-    await routerForTests.push({ name: 'home' })
+    await router.push({ name: 'global-feed' })
   })
 
-  it('should redirect to another page when click the link', async function () {
+  it('should redirect to another page when click the link', async () => {
     // given
     const { container, getByRole } = render(AppLink, {
-      global: { plugins: [routerForTests] },
-      props: { name: 'foo' },
-      slots: { default: 'Go to Foo' },
+      global: { plugins: [router] },
+      props: { name: 'tag', params: { tag: 'foo' } },
+      slots: { default: 'Go to Foo tag' },
     })
 
     expect(container).toHaveTextContent('Go to Foo')
 
     // when
-    const linkElement = getByRole('link', { name: 'foo' })
+    const linkElement = getByRole('link', { name: 'tag' })
     await fireEvent.click(linkElement)
 
     // then

src/pages/Article.spec.ts

@@ -1,10 +1,17 @@
-import { mount } from '@vue/test-utils'
+import { render } from '@testing-library/vue'
+import { router } from 'src/router'
 import Article from './Article.vue'
 
 describe('# Article', () => {
-  it('should display correctly', () => {
-    const wrapper = mount(Article)
+  beforeEach(async () => {
+    await router.push('/')
+  })
 
-    expect(wrapper.text()).toContain('Article is downloading')
+  it('should render correctly', () => {
+    const { container } = render(Article, {
+      global: { plugins: [router] },
+    })
+
+    expect(container.textContent).toContain('Article is downloading')
   })
 })

src/setup-test.ts

@@ -9,6 +9,9 @@ jest.mock('src/config', () => ({
   },
 }))
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+global.fetch = jest.fn().mockImplementation(() => new Promise(() => {}))
+
 afterEach(() => {
   jest.clearAllMocks()
 })