परीक्षण प्रतिक्रिया UI घटक

अब मैं क्या कर रहा हूँ

मैं वर्तमान में एक कोड कार्यान्वयन का परीक्षण कर रहा हूं। रिफैक्टरिंग के बाद इस तरह के परीक्षण हर बार टूटते हैं, खासकर उपयोगकर्ता इंटरफ़ेस घटकों में। नतीजतन, मैं .test.js फ़ाइलों में खुदाई करने में बहुत समय .test.js , साथ ही साथ टेस्ट कवरेज के लिए 80% के जादुई आंकड़े का पालन करता .test.js ।

मुझे क्या करना चाहिए?

इकाई परीक्षण सहित किसी भी प्रकार के परीक्षण को लिखते समय, मुझे उस कोड के बारे में कम सोचना चाहिए जिसका मैं परीक्षण कर रहा हूं, और इस कोड के बारे में अधिक। इसका अर्थ है कि उपयोगकर्ता के व्यवहार की नकल करने वाले परीक्षण लिखना। निम्नतम स्तर पर भी।

उदाहरण

एक मानक yuy accordion घटक की कल्पना करें। जब दबाया जाता है, तो यह खुलता है या बंद होता है। सामग्री को घटक के रूप में children को दिया जाता है।

हमारे परीक्षण घटक की कार्यक्षमता इस प्रकार है:

• पहले 3 समझौते तैनात हैं, शेष सभी बंद हैं।
• जब आप समझौते पर क्लिक करते हैं, तो publishAccordionAnalytics मॉड्यूल publishAccordionAnalytics , जो एनालिटिक्स को ट्रैक करता है। हम इस मॉड्यूल को @myProject/analyticsHelpers पैकेज से आयात करते हैं
• यदि उपयोगकर्ता एप्लिकेशन के निचले भाग में छिपे हुए अकॉर्डियन पर क्लिक करता है, और अकॉर्डिंग सामग्री खोलने के बाद उपयोगकर्ता के क्षेत्र में नहीं है, तो एनीमेशन चालू हो जाता है और घटक सामग्री स्क्रीन के दृश्य भाग में चली जाती है।

 ... import { publishAccordeonAnalytics } from '@myProject/analyticsHelpers'; class Accordion extends Component { positionReference: RefObjectType; constructor(props) { super(props); this.positionReference = React.createRef(); } scrollToRef = (ref) => { const wrapper = document.querySelector('.app'); return isInViewPort(ref, wrapper) ? null : setTimeout(() => { return ref.current && wrapper && wrapper.scrollTo(wrapper.scrollTop, wrapper.scrollTop + ref.current.offsetTop) }, 300); }; render() { const { headerName, children, index } = this.props; const { scrollToRef, positionReference } = this; const defaultOpenAccordions = index >= 3; return ( <Accordion defaultOpen={!defaultOpenAccordions} headerName={headerName} onChange={(open) => { publishAccordionAnalytics(open, headerName); if (defaultOpenAccordions) { scrollToRef(positionReference); } }} id={headerName} > {children} {defaultOpenAccordions && <div data-testId="referenced-div" ref={positionReference} />} </Accordion> ); } } 

अब मैं एक परीक्षा कैसे लिखूंगा:

 jest.mock('@myProject/analyticsHelpers'); describe('', () => { test(' ', () => { const jsx = ( <Accordion headerName=" "> <div>Test</div> </Accordion> ); const tree = renderer .create(jsx) .toJSON(); expect(tree).toMatchSnapshot(); }); test(' ', () => { const wrapper = mount( <Accordion headerName=" " index={1}> <div>Test</div> </Accordion> ); wrapper.find('Header').simulate('click'); expect(publishAccordeonAnalytics).toHaveBeenCalledTimes(1); }); test(' scrollToRef ', () => { const wrapper = shallow( <Accordion headerName=" " index={7}> <div>Test</div> </Accordion>); const component = wrapper.instance(); component.scrollToRef = jest.fn(); wrapper.find('Header').simulate('click'); expect(publishAccordeonAnalytics).toHaveBeenCalledTimes(1); expect(component.scrollToRef).toHaveBeenCalled(); }) }); 

मैं स्नैपशॉट का उपयोग करके घटक की संरचना का परीक्षण करता हूं, साथ ही क्लिक पर फ़ंक्शन कॉल भी करता हूं।

यह समझौते पूरी तरह से अपेक्षित कार्यक्षमता को पूरा करते हैं और परीक्षण इसकी पुष्टि करते हैं। लेकिन अब मैं React.Component , बदले में React.Component को functional component , और एक अलग फ़ंक्शन में scrollToRef घटक scrollToRef React.Component ।

 function Accordion ({ marketName, children, index }) { const positionReference = React.createRef(); const defaultOpenAccordions = index >= config.defaultOpenAccordions; return ( <Accordion defaultOpen={!defaultOpenAccordions} headerName={headerName} onChange={(open) => { publishAccordeonAnalytics(open, marketName); if (defaultOpenAccordions) { scrollToRef(positionReference); } }} id={marketName} > {children} {defaultOpenAccordions && <div data-testId="referenced-div" ref={positionReference} />} </Accordion> ); } 

मेरे परीक्षण नीचे गिर गए ... परीक्षण ' scrollToRef ' जाता है क्योंकि विफल रहता है scrollToRef फ़ंक्शन अब एक घटक निजी विधि नहीं है। यही बात ' ' परीक्षण के साथ भी होगी, लेकिन यह मॉड्यूल से एक आयात है, इसलिए अब यह पारित हो गया है।

एक अच्छा परीक्षण लिखने के लिए, मुझे यह समझने की आवश्यकता है कि उपयोगकर्ता मेरे घटक का उपयोग कैसे करता है। उपयोगकर्ता:

1. एक अकॉर्डियन मिला है जिसमें वह जानकारी है जो उसे चाहिए
2. इसे खोलने के लिए समझौते के नाम पर क्लिक किया गया
3. मैं इफना पढ़ता हूं
4. बंद किया गया समझौता

मुझे महसूस हुआ कि उसे इस बात की परवाह नहीं है कि मेरे घटक को क्या कहा जाता है, वह इस पर क्या क्लिक करता है, और इसी तरह। इस सिद्धांत का पालन करते हुए, मुझे कुछ इस तरह लिखना चाहिए:

 import '@testing-library/jest-dom/extend-expect'; import { render, fireEvent, screen } from '@testing-library/react'; jest.mock('@myProject/analyticsHelpers'); describe('', () => { test('  ', () => { const child = <div></div>; //  № 10   const { getByText } = render( <Accordion headerName="  10" index={9}> {child} </Accordion> ); //   fireEvent.click(getByText(/  10/i)); expect(publishAccordeonAnalytics).toHaveBeenCalled(); expect(screen.queryByText('')).toBeInTheDocument(); expect(screen.getByTestId('referenced-div')).toBeInTheDocument(); //   fireEvent.click(getByText(/  10/i)); expect(publishAccordeonAnalytics).toHaveBeenCalled(); }); }); 

अब मैंने उपयोगकर्ता के व्यवहार को पुन: पेश किया है। मुझे 10 वाँ अकॉर्डियन मिला, उस पर क्लिक किया, सामग्री पढ़ी, उसे बंद किया - यह बात है!

यह परीक्षण नेत्रहीन बहुत क्लीनर है, रिफैक्टिंग का सामना कर सकता है और उपयोगकर्ता इंटरैक्शन का अनुकरण कर सकता है। और मेरे लिए उन्हें लिखना बहुत आसान था।

इस पैटर्न का उपयोग करके, हम मूल एंजाइम instance() , state() , find('ComponentName') और अन्य कार्यों के उपयोग से बच सकते हैं जो कोड के कार्यान्वयन का परीक्षण करते हैं।

नए टेस्ट के लिए, मैंने इस्तेमाल किया

• जेस्ट
• रिएक्ट परीक्षण पुस्तकालय