Test Component

๐Ÿ‘จโ€๐Ÿ’ผ Let's try the Test Component approach. In this, you create a component that uses the hook the way you would expect it to be used, then you render and test that. Here's our example from earlier:
/**
 * @vitest-environment jsdom
 */
import { renderHook, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { useState } from 'react'
import { expect, test } from 'vitest'
import { useCounter } from './use-counter'

function TestComponent() {
	const { count, increment, decrement } = useCounter(0)
	return (
		<div>
			<output>{count}</output>
			<button onClick={increment}>+</button>
			<button onClick={decrement}>-</button>
		</div>
	)
}

test('increments and decrements', async () => {
	const user = userEvent.setup()
	await render(<TestComponent />)

	expect(screen.getByRole('status').textContent).toBe(0)
	await user.click(screen.getByRole('button', { name: '+' }))
	expect(screen.getByRole('status').textContent).toBe(1)
	await user.click(screen.getByRole('button', { name: '-' }))
	expect(screen.getByRole('status').textContent).toBe(0)
})
In this example, you don't have to worry about act or result.current. You interact with the test component just like any other component you're testing.
The key point is that you render everything you need to know about into the DOM so it can be selected and asserted. You can still pass mock functions and things as props as needed, but that's not always necessary.
So, let's add another test that uses a custom TestComponent! We're going to be a lot less hand-holdy for this step because the test component can be whatever you want it to be so long as you're able to perform the actions and find the elements that will help you know things are working as you expect.
npx vitest double

Access Denied

You must login or register for the workshop to view and run the tests.

Check out this video to see how the test tab works.