Welcome to the EpicWeb.dev Workshop app!

This is the deployed version. Run locally for full experience.

Render Hook

πŸ‘¨β€πŸ’Ό We've got ourselves a hook we want to test! The useDoubleCheck in .
If you want to see it in action, check out .
Here's a quick example:
function MyComponent() {
	const dc = useDoubleCheck()
	return (
		<Form method="POST" action="/feed/lions">
			<button
				{...dc.getButtonProps({
					// put custom props here,
					// like an onClick, etc...
				})}
			>
				{dc.doubleCheck ? 'Are you sure?' : 'Feed the lions'}
			</button>
		</Form>
	)
}
The first time it's clicked, it calls preventDefault on the event and updates the doubleClick value. The second time it's clicked, it submits the form.
In both cases, any custom onClick handler will be called (which can then check the event.defaultPrevented value to see if the event was prevented).
I want you to try both renderHook and TestComponent for this exercise. Sometimes you just have to do it both ways and see which you dislike the least. πŸ˜…
Let's start with renderHook. Here's a reminder of how to use that API:
import { renderHook, act } from '@testing-library/react'
import { expect, test } from 'vitest'
import { useCounter } from './use-counter'

test('increments and decrements', () => {
	const { result } = await renderHook(() => useCounter(0))

	expect(result.current.count).toBe(0)
	act(() => result.current.increment())
	expect(result.current.count).toBe(1)
	act(() => result.current.decrement())
	expect(result.current.count).toBe(0)
})
Remember the warning before:
Be sure to always reference values off of result.current. Do not destructure values off of result.current and then reference them. This will lead you to referencing stale values and your tests won't work reliably.

vi.fn

πŸ‘¨β€πŸ’Ό In this exercise, you're going to need to use a mock function to pass as the custom onClick handler to make sure it's called when the button is clicked.
Here's how you use vi.fn to create a mock function:
const myClickHandler = vi.fn()

// ... pass the mock function just like you would a regular function

expect(myClickHandler).not.toHaveBeenCalled()
// or
expect(myClickHandler).toHaveBeenCalledTimes(1)
// or
expect(myClickHandler).toHaveBeenCalledWith('some', 'arguments')
// etc.

MouseEvent

πŸ‘¨β€πŸ’Ό Another thing you will need in this exercise is an event you can call onClick with. Because we're not rendering a component, we can't just click a button to call the click handler. We need to call it ourselves with our own:
const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true })
Regarding TypeScript, sadly, our hook expects a React.MouseEvent which we have no way of creating ourselves. So you're going to need to cast it like this:
const clickEvent = new MouseEvent('click', {
	bubbles: true,
	cancelable: true,
}) as unknown as React.MouseEvent<HTMLButtonElement>
npx vitest double