build: migrate to vite and vitest

Author: TheUnderScorer

.github/workflows/coverage-diff.yml

@@ -10,3 +10,5 @@ jobs:
       checks: write
       pull-requests: write
     uses: fingerprintjs/dx-team-toolkit/.github/workflows/coverage-diff.yml@v1
+    with:
+      testScript: pnpm test:coverage:diff

__tests__/detect-env.test.ts

@@ -1,5 +1,6 @@
 import { detectEnvironment } from '../src/detect-env'
 import { Env } from '../src/env.types'
+import { describe, it, expect } from 'vitest'
 
 describe('Detect user env', () => {
   describe('Preact', () => {

__tests__/fpjs-provider.test.tsx

@@ -3,15 +3,12 @@ import { renderHook } from '@testing-library/react'
 import { FpContext } from '../src'
 import { createWrapper, getDefaultLoadOptions } from './helpers'
 import { version } from '../package.json'
+import { describe, it, expect, vi } from 'vitest'
+import * as agent from '@fingerprint/agent'
 
-jest.mock('@fingerprint/agent', () => {
-  return {
-    ...jest.requireActual<any>('@fingerprint/agent'),
-    start: jest.fn(),
-  }
-})
+vi.mock('@fingerprint/agent', { spy: true })
 
-const mockStart = jest.requireMock('@fingerprint/agent').start as jest.Mock
+const mockStart = vi.mocked(agent.start)
 
 describe('FpProvider', () => {
   it('should configure an instance of the Fp Agent', async () => {

__tests__/helpers.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { FpProvider, FpProviderOptions } from '../src'
-import { act } from 'react-dom/test-utils'
+import { act } from '@testing-library/react'
 
 export const getDefaultLoadOptions = () => ({
   apiKey: 'test_api_key',

__tests__/use-visitor-data.test.tsx

@@ -1,10 +1,11 @@
 import { useVisitorData, UseVisitorDataReturn } from '../src'
-import { render, renderHook } from '@testing-library/react'
+import { act, render, renderHook } from '@testing-library/react'
 import { actWait, createWrapper, wait } from './helpers'
-import { act } from 'react-dom/test-utils'
 import { useEffect, useState } from 'react'
 import userEvent from '@testing-library/user-event'
+import * as agent from '@fingerprint/agent'
 import { GetResult } from '@fingerprint/agent'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 const mockGetResult = {
   visitor_id: 'kOzFgO0kw2Eivvb14mRL',
@@ -14,23 +15,19 @@ const mockGetResult = {
   suspect_score: 0.5,
 } satisfies GetResult
 
-const mockGet = jest.fn()
+const mockGet = vi.fn()
 const mockAgent = {
   get: mockGet,
+  collect: vi.fn(),
 }
 
-const mockStart = jest.requireMock('@fingerprint/agent').start as jest.Mock
+vi.mock('@fingerprint/agent', { spy: true })
 
-jest.mock('@fingerprint/agent', () => {
-  return {
-    ...jest.requireActual('@fingerprint/agent'),
-    start: jest.fn(),
-  }
-})
+const mockStart = vi.mocked(agent.start)
 
 describe('useVisitorData', () => {
   beforeEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
 
     mockStart.mockReturnValue(mockAgent)
   })

__tests__/with-environment.preact.test.tsx

@@ -1,21 +1,23 @@
 import { render as preactRender } from '@testing-library/preact'
 import { h } from 'preact'
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
+import * as compat from 'preact/compat'
 
 describe('WithEnvironment', () => {
   describe('when running within Preact', () => {
     beforeEach(() => {
-      jest.doMock('react-dom', () => require('preact/compat'))
-      jest.doMock('react', () => require('preact/compat'))
+      vi.doMock('react', () => compat)
+      vi.doMock('react-dom', () => compat)
     })
 
     afterEach(() => {
-      jest.resetModules()
+      vi.resetAllMocks()
     })
-
-    it('should detect env as "preact"', () => {
-      const { WithEnvironment } = require('../src/components/with-environment')
+    it('should detect env as "preact"', async () => {
+      const { WithEnvironment } = await import('../src/components/with-environment')
       const PrintEnv = (props: any) => h('div', null, props?.env?.name)
 
+      // @ts-ignore
       const { container } = preactRender(h(WithEnvironment, null, h(PrintEnv, null)))
 
       expect(container.innerHTML).toContain('preact')

__tests__/with-environment.test.tsx

@@ -4,10 +4,11 @@ import { WithEnvironment } from '../src/components/with-environment'
 import { Link, MemoryRouter, Route, Routes } from 'react-router-dom'
 import userEvent from '@testing-library/user-event'
 import { actWait } from './helpers'
+import { describe, it, expect, vi } from 'vitest'
 
 describe('WithEnvironment', () => {
   it('enhances provided element with `env` prop', () => {
-    const Mock = jest.fn(() => <div>foo</div>) as FunctionComponent
+    const Mock = vi.fn(() => <div>foo</div>) as FunctionComponent
 
     render(
       <WithEnvironment>

contributing.md

@@ -44,7 +44,7 @@ pnpm lint:fix
 
 ### How to test
 
-Tests are located in `__tests__` folder and run by [jest](https://jestjs.io/) in [jsdom](https://github.com/jsdom/jsdom) environment.
+Tests are located in `__tests__` folder and run by [vitest](https://vitest.dev/) in [jsdom](https://github.com/jsdom/jsdom) environment.
 
 To run tests you can use IDE instruments or just run:
 

jest.config.js

@@ -2,15 +2,14 @@
   "name": "@fingerprintjs/fingerprintjs-pro-react",
   "version": "2.7.1",
   "description": "FingerprintJS Pro React SDK",
-  "main": "dist/fp-pro-react.cjs.js",
-  "module": "dist/fp-pro-react.esm.js",
+  "main": "dist/fp-pro-react.js",
+  "module": "dist/fp-pro-react.mjs",
   "types": "dist/fp-pro-react.d.ts",
   "exports": {
     ".": {
       "types": "./dist/fp-pro-react.d.ts",
-      "import": "./dist/fp-pro-react.esm.js",
-      "require": "./dist/fp-pro-react.cjs.js",
-      "node": "./dist/fp-pro-react.esm.js"
+      "import": "./dist/fp-pro-react.mjs",
+      "require": "./dist/fp-pro-react.js"
     }
   },
   "keywords": [
@@ -28,13 +27,14 @@
   "scripts": {
     "postinstall": "node scripts/detect-env.js",
     "prepare": "husky install",
-    "watch": "rollup -c rollup.config.js -w --bundleConfigAsCjs",
-    "build": "rimraf dist && rollup -c rollup.config.js --bundleConfigAsCjs",
+    "watch": "vite build --watch",
+    "build": "vite build",
     "start:spa": "pnpm start --prefix=examples/spa",
     "lint": "eslint --ext .js,.ts,.tsx --ignore-path .gitignore --max-warnings 0 .",
     "lint:fix": "pnpm lint --fix",
-    "test": "jest",
-    "test:coverage": "jest --coverage",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:coverage:diff": "vitest run --coverage --reporter json --outputFile.json=report.json",
     "test:dts": "tsc --noEmit --isolatedModules dist/fp-pro-react.d.ts",
     "docs": "typedoc src/index.ts --out docs"
   },
@@ -63,15 +63,13 @@
     "@fingerprintjs/eslint-config-dx-team": "^0.1.0",
     "@fingerprintjs/prettier-config-dx-team": "^0.2.0",
     "@fingerprintjs/tsconfig-dx-team": "^0.0.2",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/preact": "^3.2.3",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@testing-library/preact": "^3.2.4",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.11.28",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@vitest/coverage-istanbul": "^4.0.18",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "8.57.0",
@@ -80,23 +78,20 @@
     "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^9.0.11",
-    "jest": "^27.5.1",
-    "jest-environment-jsdom": "^27.5.1",
     "lint-staged": "^15.2.2",
     "preact": "^10.19.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "rimraf": "^5.0.5",
-    "rollup": "^4.43.0",
     "rollup-plugin-banner2": "^1.3.1",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-license": "^3.6.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typedoc": "^0.25.12",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "vite": "^7.3.0",
+    "vite-plugin-banner": "^0.8.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
   },
   "lint-staged": {
     "*.ts": "pnpm lint:fix",