Test Component
Run locally for transcripts
๐จโ๐ผ 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