ci: replace Jest with Vitest

.eslintrc

@@ -1,14 +1,10 @@
 {
-  "extends": [
-    "@pacote/eslint-config",
-    "@pacote/eslint-config-jest",
-    "plugin:cypress/recommended"
-  ],
+  "extends": ["@pacote/eslint-config", "plugin:cypress/recommended"],
   "plugins": ["cypress"],
   "env": {
     "commonjs": true,
     "es6": true,
-    "jest": true,
+    "jest": false,
     "cypress/globals": true
   },
   "parserOptions": {

cypress/e2e/a11y.cy.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jest/expect-expect */
 import { Result, RunOptions } from 'axe-core'
 
 function terminalLog(violations: Result[]) {

cypress/e2e/click.cy.ts

@@ -1,5 +1,3 @@
-/* eslint-disable jest/expect-expect */
-
 context('Click', () => {
   beforeEach(() => {
     cy.viewport(800, 600)

cypress/e2e/scroll.cy.ts

@@ -1,5 +1,3 @@
-/* eslint-disable jest/expect-expect */
-
 context('Scroll', () => {
   beforeEach(() => {
     cy.viewport(800, 600)

package.json

@@ -19,11 +19,11 @@
     "lint:styles": "stylelint 'src/**/*.css'",
     "lint": "concurrently 'yarn lint:scripts' 'yarn lint:styles'",
     "pretest": "yarn lint",
-    "test": "concurrently 'yarn test:jest' 'yarn test:cypress'",
-    "test:coverage": "concurrently 'yarn test:jest --coverage' 'yarn test:cypress'",
+    "test": "concurrently 'yarn test:vitest' 'yarn test:cypress'",
+    "test:coverage": "concurrently 'yarn test:vitest --coverage' 'yarn test:cypress'",
     "test:cypress": "yarn build && cypress run",
     "test:cypress:open": "yarn build && cypress open",
-    "test:jest": "jest",
+    "test:vitest": "vitest run",
     "release": "standard-version",
     "prepare": "yarn build"
   },
@@ -36,14 +36,6 @@
       "prettier --write"
     ]
   },
-  "jest": {
-    "testEnvironmentOptions": {
-      "url": "http://localhost"
-    },
-    "testEnvironment": "jsdom",
-    "preset": "ts-jest",
-    "fakeTimers": {}
-  },
   "author": {
     "name": "Luís Rodrigues",
     "email": "[email protected]",
@@ -61,18 +53,17 @@
     "@commitlint/cli": "17.4.4",
     "@commitlint/config-conventional": "17.4.4",
     "@pacote/eslint-config": "6.0.0",
-    "@pacote/eslint-config-jest": "3.0.1",
     "@rollup/plugin-commonjs": "24.0.1",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@rollup/plugin-typescript": "9.0.2",
     "@testing-library/cypress": "9.0.0",
     "@testing-library/dom": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
     "@types/delegated-events": "1.1.0",
-    "@types/jest": "29.4.0",
     "@types/jquery": "3.5.16",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
+    "@vitest/coverage-c8": "^0.29.2",
     "axe-core": "4.6.3",
     "concurrently": "7.6.0",
     "cssnano": "5.1.15",
@@ -84,15 +75,12 @@
     "eslint-config-standard": "17.0.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-jest": "27.2.1",
-    "eslint-plugin-jest-dom": "4.0.3",
     "eslint-plugin-n": "15.6.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-testing-library": "5.10.2",
     "husky": "8.0.3",
-    "jest": "29.4.3",
-    "jest-environment-jsdom": "29.4.3",
+    "jsdom": "^21.1.0",
     "lint-staged": "13.1.2",
     "pixrem": "5.0.0",
     "postcss": "8.4.21",
@@ -106,9 +94,9 @@
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-standard": "30.0.1",
     "stylelint-prettier": "3.0.0",
-    "ts-jest": "29.0.5",
     "tslib": "2.5.0",
-    "typescript": "4.9.5"
+    "typescript": "4.9.5",
+    "vitest": "^0.29.2"
   },
   "dependencies": {
     "@pacote/get-style": "1.1.7",

src/dom/document.ts

@@ -197,10 +197,6 @@ function createElements(buttonTemplate: string, popoverTemplate: string) {
   }
 }
 
-function attachFootnote(reference: HTMLElement, host: HTMLElement): void {
-  reference.insertAdjacentElement('beforebegin', host)
-}
-
 export function setup({
   allowDuplicates,
   anchorParentSelector,
@@ -211,7 +207,7 @@ export function setup({
   numberResetSelector,
   scope,
 }: HTMLAdapterSettings): Adapter<HTMLElement> {
-  const footnoteElements = findFootnoteLinks(document, anchorPattern, scope)
+  const footnotes = findFootnoteLinks(document, anchorPattern, scope)
     .map(
       findReference(
         document,
@@ -224,15 +220,14 @@ export function setup({
     .map(prepareTemplateData)
     .map(numberResetSelector ? resetNumbers(numberResetSelector) : (i) => i)
     .map(createElements(buttonTemplate, contentTemplate))
-
-  footnoteElements.forEach(({ original, host }) => {
-    setPrintOnly(original.reference)
-    setPrintOnly(original.body)
-    recursiveHideFootnoteContainer(original.body)
-    attachFootnote(original.reference, host)
-  })
-
-  const footnotes = footnoteElements.map(createFootnote)
+    .map((e) => {
+      setPrintOnly(e.original.reference)
+      setPrintOnly(e.original.body)
+      recursiveHideFootnoteContainer(e.original.body)
+      e.original.reference.insertAdjacentElement('beforebegin', e.host)
+      return e
+    })
+    .map(createFootnote)
 
   return {
     footnotes,

test/activate.test.ts

@@ -1,3 +1,4 @@
+import { test, expect, afterEach, beforeEach, vi } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import {
   setDocumentBody,
@@ -13,7 +14,9 @@ beforeEach(() => {
   setDocumentBody('single.html')
 })
 
-afterEach(jest.useRealTimers)
+afterEach(() => {
+  vi.useRealTimers()
+})
 
 test('activate footnote when clicking the button', async () => {
   littlefoot(TEST_SETTINGS)
@@ -37,31 +40,31 @@ test('does not insert empty paragraphs in the footnote content (#187)', async ()
 })
 
 test('activate footnote by ID when calling .activate()', () => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
   const instance = littlefoot({ activateDelay: 200 })
   const button = getButton('1')
 
   instance.activate('1')
 
-  jest.advanceTimersByTime(50)
+  vi.advanceTimersByTime(50)
   expect(button).toHaveClass('is-changing')
 
-  jest.advanceTimersByTime(50)
+  vi.advanceTimersByTime(50)
   expect(button).toHaveClass('is-active')
   getPopoverByText(/This is the document's only footnote./)
 })
 
 test('activate footnote by ID when calling .activate() with a timeout', () => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
   const instance = littlefoot({ activateDelay: 200 })
   const button = getButton('1')
 
   instance.activate('1', 100)
 
-  jest.advanceTimersByTime(50)
+  vi.advanceTimersByTime(50)
   expect(button).toHaveClass('is-changing')
 
-  jest.advanceTimersByTime(50)
+  vi.advanceTimersByTime(50)
   expect(button).toHaveClass('is-active')
 })
 

test/dismiss.test.ts

@@ -1,3 +1,4 @@
+import { test, expect, beforeEach } from 'vitest'
 import { fireEvent, screen } from '@testing-library/dom'
 import {
   setDocumentBody,

test/helper.ts

@@ -1,8 +1,11 @@
-import '@testing-library/jest-dom/extend-expect'
+import { expect } from 'vitest'
+import matchers from '@testing-library/jest-dom/matchers'
 import { waitFor, screen } from '@testing-library/dom'
 import { join } from 'path'
 import { readFileSync } from 'fs'
 
+expect.extend(matchers)
+
 export function getPopoverByText(matcher: string | RegExp): HTMLElement {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return screen

test/options/activateCallback.test.ts

@@ -1,10 +1,11 @@
+import { test, expect, vi } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import { setDocumentBody, getPopover, getButton } from '../helper'
 import littlefoot from '../../src/littlefoot'
 
 test('setup with activateCallback', () => {
   setDocumentBody('single.html')
-  const activateCallback = jest.fn()
+  const activateCallback = vi.fn()
   littlefoot({ activateCallback })
   const button = getButton('1')
 
@@ -17,7 +18,7 @@ test('setup with activateCallback', () => {
 
 test('activateCallback can be set after initialisation', () => {
   setDocumentBody('single.html')
-  const activateCallback = jest.fn()
+  const activateCallback = vi.fn()
   const instance = littlefoot()
   instance.updateSetting('activateCallback', activateCallback)
   const button = getButton('1')

test/options/activateDelay.test.ts

@@ -1,23 +1,26 @@
+import { test, expect, afterEach, vi } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import { setDocumentBody, getButton } from '../helper'
 import littlefoot from '../../src/littlefoot'
 
-afterEach(jest.useRealTimers)
+afterEach(() => {
+  vi.useRealTimers()
+})
 
 test('activateDelay can be set after initialisation', () => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
   setDocumentBody('single.html')
 
   const instance = littlefoot({ activateDelay: 0 })
   instance.updateSetting('activateDelay', 200)
 
   const button = getButton('1')
   fireEvent.click(button)
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
 
   expect(button).toHaveClass('is-changing')
 
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
 
   expect(button).not.toHaveClass('is-changing')
 })

test/options/activateOnHover.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest'
 import littlefoot from '../../src/littlefoot'
 import { setDocumentBody, waitToStopChanging, getButton } from '../helper'
 import { fireEvent } from '@testing-library/dom'

test/options/allowDuplicates.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest'
 import littlefoot from '../../src/littlefoot'
 import { setDocumentBody, getAllButtons } from '../helper'
 

test/options/allowMultiple.test.ts

@@ -1,3 +1,4 @@
+import { test, expect, afterEach, beforeEach, vi } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import {
   setDocumentBody,
@@ -11,19 +12,21 @@ beforeEach(() => {
   setDocumentBody('default.html')
 })
 
-afterEach(jest.useRealTimers)
+afterEach(() => {
+  vi.useRealTimers()
+})
 
 test('disallow multiple activations', () => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
   littlefoot({ allowMultiple: false })
 
   const one = getButton('1')
   fireEvent.click(one)
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
 
   const two = getButton('2')
   fireEvent.click(two)
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
 
   expect(getAllActiveButtons()).toEqual([two])
 })

test/options/anchorParentSelector.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import { setDocumentBody, getButton, getPopover } from '../helper'
 import littlefoot from '../../src/littlefoot'

test/options/buttonTemplate.test.ts

@@ -1,3 +1,4 @@
+import { test, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/dom'
 import { setDocumentBody, getButton } from '../helper'
 import littlefoot from '../../src/littlefoot'

test/options/contentTemplate.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import { setDocumentBody, waitToStopChanging, getButton } from '../helper'
 import littlefoot from '../../src/littlefoot'

test/options/dismissCallback.test.ts

@@ -1,3 +1,4 @@
+import { test, expect, vi } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import {
   setDocumentBody,
@@ -9,7 +10,7 @@ import littlefoot from '../../src/littlefoot'
 
 test('setup with dismissCallback', async () => {
   setDocumentBody('single.html')
-  const dismissCallback = jest.fn()
+  const dismissCallback = vi.fn()
   littlefoot({ dismissCallback })
 
   const button = getButton('1')
@@ -27,7 +28,7 @@ test('setup with dismissCallback', async () => {
 
 test('dismissCallback can be set after initialisation', async () => {
   setDocumentBody('single.html')
-  const dismissCallback = jest.fn()
+  const dismissCallback = vi.fn()
 
   const instance = littlefoot()
   instance.updateSetting('dismissCallback', dismissCallback)

test/options/dismissDelay.test.ts

@@ -1,25 +1,28 @@
+import { test, expect, afterEach, vi } from 'vitest'
 import { fireEvent } from '@testing-library/dom'
 import { setDocumentBody, getButton } from '../helper'
 import littlefoot from '../../src/littlefoot'
 
-afterEach(jest.useRealTimers)
+afterEach(() => {
+  vi.useRealTimers()
+})
 
 test('dismissDelay can be set after initialisation', async () => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
   setDocumentBody('single.html')
 
   const instance = littlefoot({ activateDelay: 0, dismissDelay: 0 })
   instance.updateSetting('dismissDelay', 200)
 
   const button = getButton('1')
   fireEvent.click(button)
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
   fireEvent.click(button)
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
 
   expect(button).toHaveClass('is-changing')
 
-  jest.advanceTimersByTime(100)
+  vi.advanceTimersByTime(100)
 
   expect(button).not.toHaveClass('is-changing')
 })

test/options/dismissOnUnhover.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from 'vitest'
 import { fireEvent, waitFor } from '@testing-library/dom'
 import { setDocumentBody, getButton, getPopover } from '../helper'
 import littlefoot from '../../src/littlefoot'