Test Component

Loading "Custom Test Components Vs Render Hook Utility"

Custom Test Components Vs Render Hook Utility

👨‍💼 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

06. Hooks/02. Test Component (💪 problem)

Test Component