User Events को Simulate करना
In this page:
import userEvent from "@testing-library/user-event";
const user = userEvent.setup();
await user.click(screen.getByRole("button", { name: "label" }));
await user.type(screen.getByLabelText("label"), "text");एक Click Simulate करना
userEvent.click(element) एक real user द्वारा एक element click करने को simulate करता है, events की full sequence सहित जो एक browser actually fire करेगा (pointerdown, mousedown, focus, आदि), ज़्यादा accurately than ज़्यादा basic fireEvent.click, जो सिर्फ एक single click event fire करता है।
उदाहरण: Simulating a Click
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';
test('increments on click', async () => {
const user = userEvent.setup();
render(<Counter />);
await user.click(screen.getByText('Increment'));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
एक Input में Typing Simulate करना
userEvent.type(element, text) एक user को character by character typing simulate करता है, वही sequence of keyboard और input events trigger करते हुए जो एक real keystroke करेगा, जो directly एक input की value set करने से ज़्यादा realistic है।
उदाहरण: Simulating Typing into an Input
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SearchBox from './SearchBox';
test('updates as user types', async () => {
const user = userEvent.setup();
render(<SearchBox />);
await user.type(screen.getByRole('textbox'), 'react');
expect(screen.getByDisplayValue('react')).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
एक Full Form Submission Flow Test करना
कई userEvent calls को sequence में combine करना आपको एक complete realistic flow simulate करने देता है — fields में type करना, फिर submit click करना — exactly वही mirror करते हुए जो एक real person करेगा, और resulting behavior verify करते हुए (जैसे एक success message appear होना)।
उदाहरण: Testing a Full Form Submission Flow
// Run in your local React project (npm install required)
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LoginForm from './LoginForm';
test('submits the login form', async () => {
const user = userEvent.setup();
render(<LoginForm />);
await user.type(screen.getByLabelText('Email'), '[email protected]');
await user.click(screen.getByRole('button', { name: 'Log In' }));
expect(await screen.findByText('Welcome back!')).toBeInTheDocument();
});⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Typing के लिए fireEvent उपयोग करना जब userEvent real keystroke-by-keystroke typing behavior को ज़्यादा accurately simulate करता है।
- यह भूल जाना कि ज़्यादातर userEvent methods async हैं और await चाहिए।
- Library के newer versions में इसे उपयोग करने से पहले userEvent.setup() से userEvent setup न करना।
- @testing-library/user-event real user interactions को ज़्यादा realistically simulate करता है lower-level fireEvent API से।
- userEvent.click, userEvent.type, और similar methods async हैं और await किए जाने चाहिए।
- userEvent.setup() एक user-event instance बनाता है, typically एक test के top पर एक बार call किया जाता है।
- Realistic interactions simulate करना वे bugs पकड़ता है जो एक ज़्यादा artificial fireEvent miss कर सकता है।
npm install @testing-library/user-event चाहिए — एक Node test environment में run होता है, इस browser sandbox में नहीं।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: