प्रभावी प्रतिक्रिया घटक परीक्षण महत्वपूर्ण है। रिएक्ट टेस्टिंग लाइब्रेरी (आरटीएल) इस प्रक्रिया को सरल बनाता है, उपयोगकर्ता इंटरैक्शन परीक्षण पर जोर देते हुए। यह लेख अधिक कुशल और बनाए रखने योग्य इकाई परीक्षण लिखने के लिए पांच उन्नत आरटीएल तकनीक प्रस्तुत करता है।

1। क्वेरी के लिए स्क्रीन

] स्क्रीन का उपयोग करना ऑब्जेक्ट लगातार पठनीयता और स्पष्टता में सुधार करता है।

• स्पष्ट रूप से प्रस्तुत स्क्रीन तत्वों के साथ बातचीत दिखाता है।

के बजाय:

const { getByText } = render();
expect(getByText(/click me/i)).toBeInTheDocument();

render();
expect(screen.getByText(/click me/i)).toBeInTheDocument();

२। ] ] यह सुनिश्चित करता है कि तत्व प्रतिपादन के बाद ही चलते हैं।

फ़ायदे: समय के मुद्दों के कारण परतदार परीक्षणों को समाप्त करता है।

एसिंक्रोनस घटकों के लिए अधिक मजबूत परीक्षण बनाता है। उदाहरण:

रेंडर (); const उपयोगकर्ता नाम = प्रतीक्षा स्क्रीन। अपेक्षा (उपयोगकर्ता नाम) .tobeinthedocument (); ] उन्हें एक साथ उपयोग करने से बचें।

रेंडर (); प्रतीक्षा करें () => { अपेक्षा (screen.getByText (/जॉन डो/i))। tobeinthedocument (); });

के भीतर सटीक लक्ष्यीकरण के लिए

// Component asynchronously fetches and displays a username
render();
const userName = await screen.findByText(/john doe/i);
expect(userName).toBeInTheDocument();

अनपेक्षित तत्व चयन को रोकता है। परीक्षण परिशुद्धता में सुधार करता है। उदाहरण:

render();
await waitFor(() => {
  expect(screen.getByText(/john doe/i)).toBeInTheDocument();
});

४। ] ] फ़ायदे:

अधिक सटीक घटना सिमुलेशन। पाठ इनपुट की तरह जटिल इंटरैक्शन को संभालता है।

उदाहरण:

] रेंडर (); const emailInput = screen.getBylabeltext (/ईमेल/i); const passwordInput = screen.getBylabeltext (/पासवर्ड/i); const submitbutton = screen.getByRole ('बटन', {name: /सबमिट /i}); Userevent.Type (ईमेलइनपुट, '[email protected]') का इंतजार करें; Userevent.Type (PasswordInput, 'Password123') का इंतजार करें; Userevent.Click (सबमिटबटन) का इंतजार; अपेक्षा करें (scred.getByText (/स्वागत/i))। tobeinthedocument ();
]

फ़ायदे:

render(
  

    
Personal Information
    Name
  
);

const nameLabel = within(screen.getByRole('group')).getByLabelText(/Name/i);
expect(nameLabel).toBeInTheDocument();

उदाहरण: रेंडर (); screen.debug (); // डोम संरचना को लॉग करता है

विशिष्ट तत्वों को लक्षित करना भी संभव है: ] भीतर (खंड) .debug ();

अतिरिक्त युक्तियाँ:

• निष्कर्ष:

RTL उपयोगकर्ता-केंद्रित परीक्षण को प्राथमिकता देता है। इन तकनीकों को लागू करके, आप अपने समग्र विकास वर्कफ़्लो में सुधार करते हुए, क्लीनर, अधिक विश्वसनीय और बनाए रखने योग्य परीक्षण बनाएंगे। अपनी प्रतिक्रिया परीक्षण प्रथाओं को बढ़ाने के लिए इन रणनीतियों को गले लगाओ।