Jest to Vitest migration

Author: vezaynk

jest.config.js

@@ -11,8 +11,7 @@
     "release": "pnpm -F=fastify-renderer publish",
     "preinstall": "npx only-allow pnpm",
     "prerelease": "pnpm -F=fastify-renderer run gitpkg publish",
-    "test": "jest --forceExit -w=1",
-    "test:debug": "cross-env FR_DEBUG_SERVE=1 node --inspect-brk ./node_modules/.bin/jest --forceExit"
+    "test": "vitest --no-threads"
   },
   "repository": {
     "type": "git",
@@ -44,9 +43,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "expect-playwright": "^0.8.0",
     "fs-extra": "^11.1.0",
-    "jest": "^29.7.0",
+    "vitest": "^0.34.6",
     "playwright-chromium": "^1.39.0",
     "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.3",

package.json

@@ -29,7 +29,7 @@
     "lint:fix": "prettier --loglevel warn --write \"{src,test}/**/*.{ts,tsx}\" && eslint \"{src,test}/**/*.{ts,tsx}\" --quiet --fix",
     "prepublishOnly": "npm run build",
     "test": "run-s build test:unit lint",
-    "test:unit": "jest"
+    "test:unit": "vitest"
   },
   "repository": {
     "type": "git",
@@ -77,9 +77,7 @@
   },
   "devDependencies": {
     "@swc/core": "^1.3.95",
-    "@swc/jest": "^0.2.29",
     "@types/connect": "^3.4.35",
-    "@types/jest": "^29.5.6",
     "@types/node": "^18.11.9",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.11",
@@ -95,7 +93,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "fastify": "^4.24.2",
     "gitpkg": "^1.0.0-beta.2",
-    "jest": "^29.7.0",
+    "vitest": "^0.34.6",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^8.1.0",
     "prettier": "^2.7.1",
@@ -111,4 +109,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

packages/fastify-renderer/jest.config.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/require-await */
 import '@fastify/middie'
-import fs from 'fs'
+import fs from 'node:fs'
 import path from 'path'
 import { InlineConfig } from 'vite'
 import { Template } from './DocumentTemplate'
@@ -39,7 +39,7 @@ export class FastifyRendererPlugin {
   registeredComponents: Record<ImperativeRenderable, RenderableRegistration> = {}
 
   constructor(incomingOptions: FastifyRendererOptions) {
-    this.devMode = incomingOptions.devMode ?? process.env.NODE_ENV != 'production'
+    this.devMode = incomingOptions.devMode ?? (process.env.NODE_ENV != 'production' || process.env.TEST == 'true')
 
     this.vite = incomingOptions.vite || {}
     this.vite.base ??= '/.vite/'

packages/fastify-renderer/package.json

@@ -4,7 +4,7 @@ import '@fastify/middie'
 import fastifyStatic from '@fastify/static'
 import { FastifyInstance, FastifyPluginAsync, FastifyReply } from 'fastify'
 import fp from 'fastify-plugin'
-import { promises as fs } from 'fs'
+import { promises as fs } from 'node:fs'
 import path from 'path'
 import { resolveConfig, build as viteBuild, createServer, ResolvedConfig, ViteDevServer } from 'vite'
 import { DefaultDocumentTemplate } from './DocumentTemplate'
@@ -53,7 +53,7 @@ const plugin: FastifyPluginAsync<FastifyRendererOptions> = async (fastify, incom
 
   fastify.setRenderConfig({
     base: incomingOptions.base || '',
-    layout: incomingOptions.layout || require.resolve('./renderers/react/DefaultLayout'),
+    layout: incomingOptions.layout || require.resolve('./renderers/react/DefaultLayout.tsx'),
     document: incomingOptions.document || DefaultDocumentTemplate,
   })
 

packages/fastify-renderer/src/node/Plugin.ts

@@ -46,7 +46,7 @@ export class ReactRenderer implements Renderer {
   clientModulePath: string
 
   constructor(readonly plugin: FastifyRendererPlugin, readonly options: ReactRendererOptions) {
-    this.clientModulePath = require.resolve('../../../client/react')
+    this.clientModulePath = require.resolve('../../../client/react/index.ts')
   }
 
   vitePlugins() {

packages/fastify-renderer/src/node/index.ts

@@ -1,10 +1,11 @@
-import { promises as fs } from 'fs'
+import { promises as fs } from 'node:fs'
 import path from 'path'
 import * as Vite from 'vite'
 import FastifyRenderer, { build } from '../src/node'
 import { FastifyRendererPlugin } from '../src/node/Plugin'
 import { kRenderOptions } from '../src/node/symbols'
 import { newFastify } from './helpers'
+import { describe, beforeEach, vi, test, expect } from 'vitest'
 
 const testComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-module.tsx'))
 const testLayoutComponent = require.resolve(path.join(__dirname, 'fixtures', 'test-layout.tsx'))
@@ -13,7 +14,7 @@ const options = { vite: { root: __dirname, logLevel: (process.env.LOG_LEVEL ?? '
 describe('FastifyRenderer', () => {
   let server
   beforeEach(async () => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
 
     server = await newFastify()
     await server.register(FastifyRenderer, options)
@@ -62,8 +63,8 @@ describe('FastifyRenderer', () => {
 
   test('should close vite devServer when fastify server is closing in dev mode', async () => {
     const devServer = await Vite.createServer()
-    const closeSpy = jest.spyOn(devServer, 'close')
-    jest.spyOn(Vite, 'createServer').mockImplementation(async () => devServer)
+    const closeSpy = vi.spyOn(devServer, 'close')
+    vi.spyOn(Vite, 'createServer').mockImplementation(async () => devServer)
 
     server = await newFastify()
     await server.register(FastifyRenderer, { ...options, devMode: true })
@@ -74,7 +75,7 @@ describe('FastifyRenderer', () => {
   })
 
   test('should do nothing if the registered route is not renderable', async () => {
-    const registerRouteSpy = jest.spyOn(FastifyRendererPlugin.prototype, 'register')
+    const registerRouteSpy = vi.spyOn(FastifyRendererPlugin.prototype, 'register')
 
     server.get('/', async (_request, reply) => reply.send('Hello'))
     await server.inject({ method: 'GET', url: '/' })
@@ -83,7 +84,9 @@ describe('FastifyRenderer', () => {
   })
 
   test("should register the route in the plugin if it's renderable", async () => {
-    const registerRouteSpy = jest.spyOn(FastifyRendererPlugin.prototype, 'register').mockImplementation(jest.fn())
+    const registerRouteSpy = vi
+      .spyOn(FastifyRendererPlugin.prototype, 'register')
+      .mockImplementation(vi.fn(() => null as any))
 
     server.get('/', { render: testComponent }, async (request, reply) => reply.send('Hello'))
     const response = await server.inject({ method: 'GET', url: '/' })
@@ -104,9 +107,9 @@ describe('build()', () => {
     await server.register(FastifyRenderer, options)
     await server.listen({ port: 0 })
 
-    jest.spyOn(fs, 'writeFile').mockImplementation(jest.fn())
-    jest.spyOn(path, 'join').mockImplementation(jest.fn())
-    const viteBuildSpy = jest.spyOn(Vite, 'build').mockImplementation(jest.fn())
+    vi.spyOn(fs, 'writeFile').mockImplementation(vi.fn(() => null as any))
+    vi.spyOn(path, 'join').mockImplementation(vi.fn(() => null as any))
+    const viteBuildSpy = vi.spyOn(Vite, 'build').mockImplementation(vi.fn(() => null as any))
 
     await build(server)