migrate to vitest

__test__/pages/about.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 
 import About from '../../pages/about'
 
-jest.mock('next/router', () => ({
+vi.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',

__test__/pages/index.spec.tsx

@@ -1,11 +1,12 @@
 import fs from 'fs'
 
 import { render, screen, waitFor, fireEvent } from '@testing-library/react'
+import { MockInstance } from 'vitest'
 
 import { PostMetadata } from '../../lib/postsApi'
 import Index, { getStaticProps } from '../../pages/index'
 
-jest.mock('next/router', () => ({
+vi.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',
@@ -16,7 +17,7 @@ jest.mock('next/router', () => ({
   },
 }))
 
-jest.mock('../../pages/posts/building-this-site.mdx', () => ({
+vi.mock('../../pages/posts/building-this-site.mdx', () => ({
   metadata: {
     coverImage: '/assets/blog/building-this-site/code.webp',
     date: '2021-05-09T15:40:07.322Z',
@@ -28,7 +29,7 @@ jest.mock('../../pages/posts/building-this-site.mdx', () => ({
   },
 }))
 
-jest.mock('../../pages/posts/bye-bye-popups.mdx', () => ({
+vi.mock('../../pages/posts/bye-bye-popups.mdx', () => ({
   metadata: {
     title: 'Bye bye popups',
     excerpt:
@@ -42,10 +43,10 @@ jest.mock('../../pages/posts/bye-bye-popups.mdx', () => ({
 
 describe('Homepage', () => {
   let posts: PostMetadata[]
-  let readdirSyncSpy: jest.SpyInstance
+  let readdirSyncSpy: MockInstance
 
   beforeEach(async () => {
-    readdirSyncSpy = jest.spyOn(fs, 'readdirSync')
+    readdirSyncSpy = vi.spyOn(fs, 'readdirSync')
     readdirSyncSpy.mockReturnValue([
       'building-this-site.mdx',
       'bye-bye-popups.mdx',

__test__/pages/posts.spec.tsx

@@ -2,11 +2,12 @@ import fs from 'fs'
 
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { MockInstance } from 'vitest'
 
 import { PostMetadata } from '../../lib/postsApi'
 import Posts, { getStaticProps } from '../../pages/posts'
 
-jest.mock('next/router', () => ({
+vi.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',
@@ -17,7 +18,7 @@ jest.mock('next/router', () => ({
   },
 }))
 
-jest.mock('../../pages/posts/building-this-site.mdx', () => ({
+vi.mock('../../pages/posts/building-this-site.mdx', () => ({
   metadata: {
     coverImage: '/assets/blog/building-this-site/code.webp',
     date: '2021-05-09T15:40:07.322Z',
@@ -29,7 +30,7 @@ jest.mock('../../pages/posts/building-this-site.mdx', () => ({
   },
 }))
 
-jest.mock('../../pages/posts/bye-bye-popups.mdx', () => ({
+vi.mock('../../pages/posts/bye-bye-popups.mdx', () => ({
   metadata: {
     title: 'Bye bye popups',
     excerpt:
@@ -43,11 +44,11 @@ jest.mock('../../pages/posts/bye-bye-popups.mdx', () => ({
 
 describe('Posts', () => {
   let posts: PostMetadata[]
-  let readdirSyncSpy: jest.SpyInstance
+  let readdirSyncSpy: MockInstance
   let user: ReturnType<typeof userEvent.setup>
 
   beforeEach(async () => {
-    readdirSyncSpy = jest.spyOn(fs, 'readdirSync')
+    readdirSyncSpy = vi.spyOn(fs, 'readdirSync')
     readdirSyncSpy.mockReturnValue([
       'building-this-site.mdx',
       'bye-bye-popups.mdx',

components/Header/Header.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 
 import Header from './Header'
 
-jest.mock('next/router', () => ({
+vi.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',
@@ -55,13 +55,15 @@ describe('Header', () => {
   })
 
   it('renders an extra link when on an individual post', async () => {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const useRouter = jest.spyOn(require('next/router'), 'useRouter')
-    useRouter.mockImplementation(() => ({
-      route: '/',
-      pathname: '/',
-      query: '',
-      asPath: '/posts/foo',
+    vi.mock('next/router', () => ({
+      useRouter() {
+        return {
+          route: '/',
+          pathname: '/',
+          query: '',
+          asPath: '/posts/foo',
+        }
+      },
     }))
     await setup()
     const link = screen.getByRole('link', { name: '/foo' })

components/Layout/Layout.spec.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 
 import Layout from './Layout'
 
-jest.mock('next/router', () => ({
+vi.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',

components/PostCard/PostCard.spec.tsx

@@ -22,7 +22,7 @@ describe('PostCard', () => {
   })
 
   afterEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
   })
 
   it('displays the title', () => {

components/PostLayout/PostLayout.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 
 import PostLayout from './PostLayout'
 
-jest.mock('next/router', () => ({
+vi.mock('next/router', () => ({
   useRouter() {
     return {
       route: '/',
@@ -31,7 +31,7 @@ describe('PostLayout', () => {
   }
 
   beforeEach(async () => {
-    jest.spyOn(Date.prototype, 'toLocaleDateString').mockReturnValue(mockDate)
+    vi.spyOn(Date.prototype, 'toLocaleDateString').mockReturnValue(mockDate)
     render(<PostLayout metadata={mockMetadata}>{mockContent}</PostLayout>)
 
     // need to wait for the theme toggle to render
@@ -42,7 +42,7 @@ describe('PostLayout', () => {
   })
 
   afterEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
   })
 
   it('displays the title', () => {

components/PostTitle/PostTitle.spec.tsx

@@ -10,11 +10,11 @@ describe('PostTitle', () => {
   const mockTitle = 'mockTitle'
 
   beforeEach(() => {
-    jest.spyOn(Date.prototype, 'toLocaleDateString').mockReturnValue(mockDate)
+    vi.spyOn(Date.prototype, 'toLocaleDateString').mockReturnValue(mockDate)
   })
 
   afterEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
   })
 
   it('displays the title', () => {
@@ -111,7 +111,7 @@ describe('PostTitle', () => {
   })
 
   it('has a native "Share" button if it supports it', async () => {
-    navigator.share = jest.fn()
+    navigator.share = vi.fn()
     const user = userEvent.setup()
     render(
       <PostTitle
@@ -126,7 +126,7 @@ describe('PostTitle', () => {
     await user.click(button)
     expect(navigator.share).toHaveBeenCalledWith({
       title: mockTitle,
-      url: 'http://localhost/',
+      url: 'http://localhost:3000/',
     })
   })
 })

components/Search/Search.spec.tsx

@@ -6,7 +6,7 @@ import Search from './Search'
 describe('Search', () => {
   const mockClassName = 'mockClassName'
   const mockPlaceholder = 'mockPlaceholder'
-  const mockOnChange = jest.fn()
+  const mockOnChange = vi.fn()
   let user: ReturnType<typeof userEvent.setup>
 
   beforeEach(() => {

components/Tag/Tag.spec.tsx

@@ -7,7 +7,9 @@ import {
 
 import Tag from './Tag'
 
-jest.mock('randomcolor', () => () => '#012345')
+vi.mock('randomcolor', () => ({
+  default: () => '#012345',
+}))
 
 describe('Tag', () => {
   it('displays the tag label', () => {

components/WordlePoem/Word.spec.tsx

@@ -1,19 +1,20 @@
 import { render, screen } from '@testing-library/react'
+import { MockInstance } from 'vitest'
 
 import Word from './Word'
 
 describe('Word', () => {
-  let mockIntersectionObserver: jest.Mock
+  let mockIntersectionObserver: MockInstance
 
   beforeEach(async () => {
     // IntersectionObserver isn't available in test environment
-    mockIntersectionObserver = jest.fn()
+    mockIntersectionObserver = vi.fn()
     mockIntersectionObserver.mockReturnValue({
       observe: () => null,
       unobserve: () => null,
       disconnect: () => null,
     })
-    window.IntersectionObserver = mockIntersectionObserver
+    vi.stubGlobal(`IntersectionObserver`, mockIntersectionObserver)
   })
 
   it('splits each word into individual characters and sets the correct classes', () => {

components/WordlePoem/WordlePoem.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react'
+import { MockInstance } from 'vitest'
 
 import WordlePoem from './WordlePoem'
 
@@ -15,17 +16,17 @@ const customMatcher =
   }
 
 describe('WordlePoem', () => {
-  let mockIntersectionObserver: jest.Mock
+  let mockIntersectionObserver: MockInstance
 
   beforeEach(async () => {
     // IntersectionObserver isn't available in test environment
-    mockIntersectionObserver = jest.fn()
+    mockIntersectionObserver = vi.fn()
     mockIntersectionObserver.mockReturnValue({
       observe: () => null,
       unobserve: () => null,
       disconnect: () => null,
     })
-    window.IntersectionObserver = mockIntersectionObserver
+    vi.stubGlobal(`IntersectionObserver`, mockIntersectionObserver)
   })
 
   it('splits each line into separate words', () => {

config/jest-setup-after-env.ts → config/test-setup.ts

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom'
-import failOnConsole from 'jest-fail-on-console'
+import failOnConsole from 'vitest-fail-on-console'
 
 failOnConsole({
   shouldFailOnLog: true,

custom.d.ts

@@ -4,5 +4,3 @@ declare global {
   const browser: Browser
   const browserName: string
 }
-
-declare module 'jest-next-dynamic'

lib/postsApi.spec.ts

@@ -1,8 +1,10 @@
 import fs from 'fs'
 
+import { MockInstance } from 'vitest'
+
 import { getAllPosts, getPostMetadata } from './postsApi'
 
-jest.mock('../pages/posts/building-this-site.mdx', () => ({
+vi.mock('../pages/posts/building-this-site.mdx', () => ({
   metadata: {
     coverImage: '/assets/blog/building-this-site/code.webp',
     date: '2021-05-09T15:40:07.322Z',
@@ -14,7 +16,7 @@ jest.mock('../pages/posts/building-this-site.mdx', () => ({
   },
 }))
 
-jest.mock('../pages/posts/bye-bye-popups.mdx', () => ({
+vi.mock('../pages/posts/bye-bye-popups.mdx', () => ({
   metadata: {
     title: 'Bye bye popups',
     excerpt:
@@ -43,10 +45,10 @@ describe('postsApi', () => {
   })
 
   describe('getAllPosts', () => {
-    let readdirSyncSpy: jest.SpyInstance
+    let readdirSyncSpy: MockInstance
 
     beforeEach(() => {
-      readdirSyncSpy = jest.spyOn(fs, 'readdirSync')
+      readdirSyncSpy = vi.spyOn(fs, 'readdirSync')
     })
 
     afterEach(() => {

lib/postsApi.ts

@@ -13,12 +13,11 @@ export interface PostMetadata {
 }
 
 export async function getPostMetadata(slug: string) {
-  const realSlug = slug.replace(/\.mdx$/, '')
-  const { metadata } = await import(`../pages/posts/${realSlug}.mdx`)
+  const { metadata } = await import(`../pages/posts/${slug}`)
 
   return {
     ...metadata,
-    slug: realSlug,
+    slug: slug.replace(/\.mdx$/, ''),
   }
 }