@untemps/react-vocal 1.7.35 → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@untemps/react-vocal",
-	"version": "1.7.35",
+	"version": "2.0.0-beta.2",
 	"author": "Vincent Le Badezet <v.lebadezet@untemps.net>",
 	"repository": "git@github.com:untemps/react-vocal.git",
 	"license": "MIT",
@@ -23,67 +23,36 @@
 	"main": "dist/index.js",
 	"module": "dist/index.es.js",
 	"engines": {
-		"node": ">=18.0.0"
+		"node": "^20.19.0 || >=22.12.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.12.10",
-		"@babel/core": "^7.12.10",
-		"@babel/plugin-proposal-class-properties": "^7.12.1",
-		"@babel/plugin-transform-react-jsx": "^7.12.12",
-		"@babel/plugin-transform-runtime": "^7.12.10",
-		"@babel/preset-env": "^7.12.11",
-		"@babel/preset-react": "^7.12.10",
-		"@commitlint/cli": "^9.1.1",
-		"@commitlint/config-conventional": "^9.1.1",
-		"@rollup/plugin-babel": "^5.2.2",
-		"@rollup/plugin-commonjs": "^17.0.0",
-		"@rollup/plugin-node-resolve": "^11.0.1",
+		"@commitlint/cli": "^20.5.3",
+		"@commitlint/config-conventional": "^20.5.3",
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/github": "^12.0.6",
-		"@testing-library/dom": "^7.29.0",
-		"@testing-library/jest-dom": "^5.11.6",
-		"@testing-library/react": "^11.2.2",
-		"@testing-library/react-hooks": "^3.7.0",
-		"@untemps/utils": "^2.0.0-beta.1",
-		"babel-jest": "^28.0.0-alpha.11",
-		"cross-env": "^7.0.3",
-		"husky": "^4.3.6",
-		"jest": "^28.0.0-alpha.11",
-		"jest-environment-jsdom": "^28.0.0-alpha.11",
-		"prettier": "^2.2.1",
-		"prop-types": "^15.7.2",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
-		"react-test-renderer": "^17.0.1",
-		"rimraf": "^3.0.2",
-		"rollup": "^2.35.1",
-		"rollup-plugin-sizes": "^1.0.4",
-		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-visualizer": "^5.14.0",
-		"semantic-release": "^25.0.3"
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@untemps/utils": "^3.2.0",
+		"@vitejs/plugin-react": "^6.0.1",
+		"@vitest/coverage-v8": "^4.1.5",
+		"husky": "^9.1.7",
+		"jsdom": "^29.1.1",
+		"prettier": "^3.8.3",
+		"react": "^19.2.5",
+		"react-dom": "^19.2.5",
+		"semantic-release": "^25.0.3",
+		"vite": "^8.0.10",
+		"vitest": "^4.1.5"
 	},
 	"peerDependencies": {
-		"react": "^16.13.1",
-		"react-dom": "^16.13.1"
+		"react": ">=16.13.1",
+		"react-dom": ">=16.13.1"
 	},
 	"dependencies": {
 		"@untemps/vocal": "^1.3.0",
-		"fuse.js": "^6.4.6"
-	},
-	"jest": {
-		"coverageDirectory": "./coverage/",
-		"collectCoverage": true,
-		"setupFilesAfterEnv": [
-			"<rootDir>/jest/jest.setup.js"
-		],
-		"restoreMocks": true
-	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "yarn test:ci && yarn prettier",
-			"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-		}
+		"fuse.js": "^7.3.0"
 	},
 	"release": {
 		"branches": [
@@ -131,13 +100,11 @@
 		]
 	},
 	"scripts": {
-		"dev": "cd dev && rimraf dist && yarn && yarn start",
-		"test": "jest -u --watch",
-		"test:ci": "jest -u -b --ci --coverage",
-		"build": "rimraf dist && yarn build:cjs && yarn build:es && yarn build:umd",
-		"build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs rollup -c",
-		"build:es": "cross-env NODE_ENV=production BABEL_ENV=es rollup -c",
-		"build:umd": "cross-env NODE_ENV=production BABEL_ENV=umd rollup -c",
-		"prettier": "prettier \"*/**/*.js\" --ignore-path ./.prettierignore --write && git add . && git status"
+		"dev": "cd dev && yarn && yarn dev",
+		"test": "vitest",
+		"test:ci": "vitest run --coverage",
+		"build": "vite build",
+		"prepare": "husky",
+		"prettier": "prettier \"*/**/*.js\" --ignore-path ./.prettierignore --write && git add -u && git status"
 	}
 }

package/src/components/{Icon.js → Icon.jsx}

@@ -1,7 +1,6 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-const Icon = ({ color, activeColor, isActive }) => {
+const Icon = ({ color = 'black', activeColor = 'red', isActive = false }) => {
 	return (
 		<svg
 			data-testid="__icon-root__"
@@ -22,16 +21,4 @@ const Icon = ({ color, activeColor, isActive }) => {
 	)
 }
 
-Icon.propTypes = {
-	color: PropTypes.string,
-	activeColor: PropTypes.string,
-	isActive: PropTypes.bool,
-}
-
-Icon.defaultProps = {
-	color: 'black',
-	activeColor: 'red',
-	isActive: false,
-}
-
 export default Icon

package/src/components/Vocal.jsx

@@ -0,0 +1,206 @@
+import React, { cloneElement, isValidElement, useCallback, useMemo, useRef, useState } from 'react'
+import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
+import { isFunction } from '@untemps/utils/function/isFunction'
+
+import useVocal from '../hooks/useVocal'
+import useTimeout from '../hooks/useTimeout'
+import useCommands from '../hooks/useCommands'
+
+import Icon from './Icon'
+
+const Vocal = ({
+	children,
+	commands = null,
+	lang = 'en-US',
+	grammars = null,
+	timeout = 3000,
+	ariaLabel = 'start recognition',
+	style = null,
+	className = null,
+	outlineStyle = '2px solid',
+	onStart = null,
+	onEnd = null,
+	onSpeechStart = null,
+	onSpeechEnd = null,
+	onResult = null,
+	onError = null,
+	onNoMatch = null,
+	__rsInstance,
+}) => {
+	const buttonRef = useRef(null)
+	const [isListening, setIsListening] = useState(false)
+
+	const [, { start, stop, subscribe, unsubscribe }] = useVocal(lang, grammars, __rsInstance)
+	const triggerCommand = useCommands(commands)
+
+	const propsRef = useRef({})
+	propsRef.current = { onStart, onEnd, onSpeechStart, onSpeechEnd, onResult, onError, onNoMatch }
+
+	const triggerCommandRef = useRef(triggerCommand)
+	triggerCommandRef.current = triggerCommand
+
+	const unsubscribeAllRef = useRef(null)
+	const onEndRef = useRef(null)
+
+	// Breaks the circular dep: _onEnd → useTimeout(handler) → startTimer captures _onEnd
+	const stableTimerCb = useCallback(() => onEndRef.current?.(), [])
+	const [startTimer, stopTimer] = useTimeout(stableTimerCb, timeout)
+
+	const stopRecognition = useCallback(() => {
+		try {
+			setIsListening(false)
+			stop()
+		} catch (error) {
+			propsRef.current.onError?.(error)
+		} finally {
+			unsubscribeAllRef.current?.()
+		}
+	}, [stop])
+
+	const _onStart = useCallback(
+		(e) => {
+			startTimer()
+			propsRef.current.onStart?.(e)
+		},
+		[startTimer]
+	)
+
+	const _onSpeechStart = useCallback(
+		(e) => {
+			stopTimer()
+			propsRef.current.onSpeechStart?.(e)
+		},
+		[stopTimer]
+	)
+
+	const _onSpeechEnd = useCallback(
+		(e) => {
+			startTimer()
+			propsRef.current.onSpeechEnd?.(e)
+		},
+		[startTimer]
+	)
+
+	const _onResult = useCallback(
+		(event, result) => {
+			stopTimer()
+			stopRecognition()
+			triggerCommandRef.current(result)
+			propsRef.current.onResult?.(result, event)
+		},
+		[stopTimer, stopRecognition]
+	)
+
+	const _onError = useCallback(
+		(error) => {
+			stopRecognition()
+			propsRef.current.onError?.(error)
+		},
+		[stopRecognition]
+	)
+
+	const _onNoMatch = useCallback(
+		(e) => {
+			stopTimer()
+			stopRecognition()
+			propsRef.current.onNoMatch?.(e)
+		},
+		[stopTimer, stopRecognition]
+	)
+
+	const _onEnd = useCallback(
+		(e) => {
+			stopTimer()
+			stopRecognition()
+			propsRef.current.onEnd?.(e)
+		},
+		[stopTimer, stopRecognition]
+	)
+
+	onEndRef.current = _onEnd
+
+	const HANDLERS = useMemo(
+		() => ({
+			start: _onStart,
+			end: _onEnd,
+			speechstart: _onSpeechStart,
+			speechend: _onSpeechEnd,
+			result: _onResult,
+			error: _onError,
+			nomatch: _onNoMatch,
+		}),
+		[_onStart, _onEnd, _onSpeechStart, _onSpeechEnd, _onResult, _onError, _onNoMatch]
+	)
+
+	// Assigned inline (not in useEffect) so it's ready before any event fires
+	unsubscribeAllRef.current = () => Object.entries(HANDLERS).forEach(([event, fn]) => unsubscribe?.(event, fn))
+
+	const startRecognition = useCallback(() => {
+		try {
+			setIsListening(true)
+			Object.entries(HANDLERS).forEach(([event, fn]) => subscribe(event, fn))
+			start()
+		} catch (error) {
+			_onError(error)
+		}
+	}, [HANDLERS, subscribe, start, _onError])
+
+	const _onFocus = () => {
+		if (!className && outlineStyle) {
+			buttonRef.current.style.outline = outlineStyle
+		}
+	}
+
+	const _onBlur = () => {
+		if (!className && outlineStyle) {
+			buttonRef.current.style.outline = 'none'
+		}
+	}
+
+	const _renderDefault = () => (
+		<button
+			data-testid="__vocal-root__"
+			ref={buttonRef}
+			role="button"
+			aria-label={ariaLabel}
+			style={
+				className
+					? null
+					: {
+							width: 24,
+							height: 24,
+							backgroundColor: 'transparent', // `background: none` shorthand resets all sub-properties; jsdom 29 + jest-dom v6 don't reflect that correctly via getComputedStyle
+							border: 'none',
+							padding: 0,
+							cursor: !isListening ? 'pointer' : 'default',
+							...style,
+					  }
+			}
+			className={className}
+			onFocus={_onFocus}
+			onBlur={_onBlur}
+			onClick={startRecognition}
+		>
+			<Icon isActive={isListening} color="#aaa" />
+		</button>
+	)
+
+	const _renderChildren = () => {
+		if (SpeechRecognitionWrapper.isSupported) {
+			if (isFunction(children)) {
+				return children(startRecognition, stopRecognition, isListening)
+			} else if (isValidElement(children)) {
+				return cloneElement(children, {
+					...(!isListening && { onClick: startRecognition }),
+				})
+			} else {
+				return _renderDefault()
+			}
+		}
+		return null
+	}
+
+	return _renderChildren()
+}
+
+export default Vocal

package/src/components/__tests__/{Icon.test.js → Icon.test.jsx}

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 import React from 'react'
 import { render } from '@testing-library/react'
 

package/src/components/__tests__/{Vocal.test.js → Vocal.test.jsx}

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 import React from 'react'
 import { waitFor } from '@testing-library/dom'
 import { act, fireEvent, render } from '@testing-library/react'
@@ -34,11 +30,11 @@ describe('Vocal', () => {
 	})
 
 	it('renders no children element if SpeechRecognition is not supported', () => {
-		jest.spyOn(SpeechRecognitionWrapper, 'isSupported', 'get').mockReturnValueOnce(false)
+		vi.spyOn(SpeechRecognitionWrapper, 'isSupported', 'get').mockReturnValueOnce(false)
 		const { queryByTestId } = render(getInstance(null, <div data-testid="__vocal-custom-root__" />))
 		expect(queryByTestId('__vocal-root__')).not.toBeInTheDocument()
 		expect(queryByTestId('__vocal-custom-root__')).not.toBeInTheDocument()
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 	})
 
 	it('renders custom children function', () => {
@@ -48,7 +44,7 @@ describe('Vocal', () => {
 	})
 
 	it('starts recognition with custom children function', async () => {
-		const onStart = jest.fn()
+		const onStart = vi.fn()
 		const { queryByTestId } = render(
 			getInstance({ onStart }, (start) => <div data-testid="__vocal-custom-root__" onClick={start} />)
 		)
@@ -59,7 +55,7 @@ describe('Vocal', () => {
 	})
 
 	it('stops recognition with custom children function', async () => {
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const { queryByText } = render(
 			getInstance({ onEnd }, (start, stop) => (
 				<div data-testid="__vocal-custom-root__">
@@ -76,7 +72,7 @@ describe('Vocal', () => {
 	})
 
 	it('gets recognition status with custom children function', async () => {
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const { queryByText } = render(
 			getInstance({ onEnd }, (start, stop, isStarted) => (
 				<div data-testid="__vocal-custom-root__">
@@ -128,11 +124,12 @@ describe('Vocal', () => {
 
 	it('uses custom styles', () => {
 		const { getByTestId } = render(getInstance({ style: { backgroundColor: 'blue' } }))
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ backgroundColor: 'blue' })
+		// jest-dom v6 + jsdom 29: `div.style.color = 'blue'` reads back as 'blue' but getComputedStyle returns RGB; normalisation no longer bridges the gap
+		expect(getByTestId('__vocal-root__')).toHaveStyle({ backgroundColor: 'rgb(0, 0, 255)' })
 	})
 
 	it('responds to command', async () => {
-		const callback = jest.fn()
+		const callback = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const commands = { foo: callback }
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, commands }))
@@ -153,7 +150,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onStart handler', async () => {
-		const onStart = jest.fn()
+		const onStart = vi.fn()
 		const { queryByTestId } = render(getInstance({ onStart }))
 		await act(async () => {
 			fireEvent.click(queryByTestId('__vocal-root__'))
@@ -162,7 +159,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onResult handler', async () => {
-		const onResult = jest.fn()
+		const onResult = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onResult }))
 
@@ -182,7 +179,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onNoMatch handler', async () => {
-		const onNoMatch = jest.fn()
+		const onNoMatch = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onNoMatch }))
 
@@ -202,7 +199,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onSpeechStart handler', async () => {
-		const onSpeechStart = jest.fn()
+		const onSpeechStart = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onSpeechStart }))
 
@@ -222,7 +219,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onSpeechEnd handler', async () => {
-		const onSpeechEnd = jest.fn()
+		const onSpeechEnd = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onSpeechEnd }))
 
@@ -243,7 +240,7 @@ describe('Vocal', () => {
 
 	it('triggers onEnd handler after timeout', async () => {
 		const timeout = 100
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const { getByTestId } = render(getInstance({ timeout, onEnd }))
 		await act(async () => {
 			fireEvent.click(getByTestId('__vocal-root__'))
@@ -252,7 +249,7 @@ describe('Vocal', () => {
 	})
 
 	it('triggers onEnd handler after speech', async () => {
-		const onEnd = jest.fn()
+		const onEnd = vi.fn()
 		const recognition = new SpeechRecognitionWrapper()
 		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onEnd }))
 
@@ -270,4 +267,164 @@ describe('Vocal', () => {
 			await waitFor(() => expect(onEnd).toHaveBeenCalled())
 		})
 	})
+
+	it('calls the updated onEnd prop after a re-render during an active session', async () => {
+		const onEndV1 = vi.fn()
+		const onEndV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onEnd: onEndV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onEnd: onEndV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onEndV2).toHaveBeenCalled())
+		})
+
+		expect(onEndV1).not.toHaveBeenCalled()
+	})
+
+	it('resets to idle after a re-render during an active session', async () => {
+		const onEnd = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onEnd }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onEnd }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onEnd).toHaveBeenCalled())
+		})
+
+		expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'pointer' })
+	})
+
+	it('calls the updated onResult prop after a re-render during an active session', async () => {
+		const onResultV1 = vi.fn()
+		const onResultV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onResult: onResultV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onResult: onResultV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onResultV2).toHaveBeenCalledWith('Foo', expect.anything()))
+		})
+
+		expect(onResultV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onSpeechStart prop after a re-render during an active session', async () => {
+		const onSpeechStartV1 = vi.fn()
+		const onSpeechStartV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onSpeechStart: onSpeechStartV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onSpeechStart: onSpeechStartV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onSpeechStartV2).toHaveBeenCalled())
+		})
+
+		expect(onSpeechStartV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onSpeechEnd prop after a re-render during an active session', async () => {
+		const onSpeechEndV1 = vi.fn()
+		const onSpeechEndV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onSpeechEnd: onSpeechEndV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onSpeechEnd: onSpeechEndV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say('Foo')
+			await waitFor(() => expect(onSpeechEndV2).toHaveBeenCalled())
+		})
+
+		expect(onSpeechEndV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onNoMatch prop after a re-render during an active session', async () => {
+		const onNoMatchV1 = vi.fn()
+		const onNoMatchV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onNoMatch: onNoMatchV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onNoMatch: onNoMatchV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.say(null)
+			await waitFor(() => expect(onNoMatchV2).toHaveBeenCalled())
+		})
+
+		expect(onNoMatchV1).not.toHaveBeenCalled()
+	})
+
+	it('calls the updated onError prop after a re-render during an active session', async () => {
+		const onErrorV1 = vi.fn()
+		const onErrorV2 = vi.fn()
+		const recognition = new SpeechRecognitionWrapper()
+		const { getByTestId, rerender } = render(getInstance({ __rsInstance: recognition, onError: onErrorV1 }))
+
+		await act(async () => {
+			fireEvent.click(getByTestId('__vocal-root__'))
+			await waitFor(() => expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' }))
+		})
+
+		await act(async () => {
+			rerender(getInstance({ __rsInstance: recognition, onError: onErrorV2 }))
+		})
+
+		await act(async () => {
+			recognition.instance.error(new Error('mic failure'))
+			await waitFor(() => expect(onErrorV2).toHaveBeenCalled())
+		})
+
+		expect(onErrorV1).not.toHaveBeenCalled()
+	})
 })

package/src/components/__tests__/{VocalWithMockedUseVocal.test.js → VocalWithMockedUseVocal.test.jsx}

@@ -1,22 +1,20 @@
-/**
- * @jest-environment jsdom
- */
-
 import React from 'react'
 import { waitFor } from '@testing-library/dom'
 import { act, fireEvent, render } from '@testing-library/react'
 
 import Vocal from '../Vocal'
 
-jest.mock('../../hooks/useVocal', () => {
-	return () => [
-		null,
-		{
-			subscribe: () => {
-				throw new Error('Foo')
+vi.mock('../../hooks/useVocal', () => {
+	return {
+		default: () => [
+			null,
+			{
+				subscribe: () => {
+					throw new Error('Foo')
+				},
 			},
-		},
-	]
+		],
+	}
 })
 
 const defaultProps = {}
@@ -28,7 +26,7 @@ const getInstance = (props = {}, children = null) => (
 
 describe('Vocal', () => {
 	it('triggers onError handler', async () => {
-		const onError = jest.fn()
+		const onError = vi.fn()
 		const { queryByTestId } = render(getInstance({ onError }))
 		await act(async () => {
 			fireEvent.click(queryByTestId('__vocal-root__'))