रिएक् ट
React इंटरैक्टिव यूजर इंटरफेस बनाना आसान बनाता है। अपने एप्लिकेशन के प्रत्येक स्थिति के लिए सरल व्यू डिजाइन करें, और जब आपका डेटा बदलता है तो React कुशलतापूर्वक सही कंपोनेंट्स को अपडेट और रेंडर करेगा। आप WebdriverIO और इसके ब्राउज़र रनर का उपयोग करके React कंपोनेंट्स का सीधे वास्तविक ब्राउज़र में परीक्षण कर सकते हैं।
सेटअप
अपने React प्रोजेक्ट में WebdriverIO को सेटअप करने के लिए, हमारे कंपोनेंट टेस्टिंग दस्तावेज़ में दिए गए निर्देशों का पालन करें। अपने रनर विकल्पों में प्रीसेट के रूप में react
का चयन करना सुनिश्चित करें, उदाहरण के लिए:
// wdio.conf.js
export const config = {
// ...
runner: ['browser', {
preset: 'react'
}],
// ...
}
यदि आप पहले से ही Vite को डेवलपमेंट सर्वर के रूप में उपयोग कर रहे हैं, तो आप अपने WebdriverIO कॉन्फिगरेशन में vite.config.ts
में अपने कॉन्फिगरेशन का फिर से उपयोग कर सकते हैं। अधिक जानकारी के लिए, रनर विकल्प में viteConfig
देखें।
React प्रीसेट के लिए @vitejs/plugin-react
इंस्टॉल होना आवश्यक है। साथ ही, हम कंपोनेंट को टेस्ट पेज में रेंडर करने के लिए Testing Library का उपयोग करने की अनुशंसा करते हैं। इसके लिए आपको निम्नलिखित अतिरिक्त निर्भरताओं को इंस्टॉल करने की आवश्यकता होगी:
- npm
- Yarn
- pnpm
npm install --save-dev @testing-library/react @vitejs/plugin-react
yarn add --dev @testing-library/react @vitejs/plugin-react
pnpm add --save-dev @testing-library/react @vitejs/plugin-react
फिर आप इसे चलाकर परीक्षण शुरू कर सकते हैं:
npx wdio run ./wdio.conf.js
टेस्ट लिखना
मान लीजिए आपके पास निम्नलिखित React कंपोनेंट है:
import React, { useState } from 'react'
function App() {
const [theme, setTheme] = useState('light')
const toggleTheme = () => {
const nextTheme = theme === 'light' ? 'dark' : 'light'
setTheme(nextTheme)
}
return <button onClick={toggleTheme}>
Current theme: {theme}
</button>
}
export default App