Code Snippet - Component Test with RTL

/**  
 * @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)  
})