ReactJS एप्लिकेशन-रिज़ॉल्यूशन वीएस तेजी से विफल हो रहा है




validation testing (2)

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

वास्तव में, यदि घटक में एक विकल्प वैकल्पिक है, तो घटक (जो वास्तविक दृश्य प्रस्तुत करता है) को संभालना चाहिए, मूल घटक को नहीं।

हालांकि, आपके पास एक ऐसी स्थिति हो सकती है जहां माता-पिता को टूटना चाहिए अगर बच्चे के किसी भी घटक का अनुबंध टूट रहा है। मैं इस स्थिति को संभालने के दो संभावित तरीकों के बारे में सोच सकता हूं-

  1. बाल घटकों के लिए त्रुटि सूचना पास करना, जहां कुछ भी गलत होने पर बच्चा माता-पिता के घटक को त्रुटि की सूचना दे सकता है। लेकिन यह साफ समाधान नहीं है क्योंकि अगर एन बच्चे हैं और अगर एक से अधिक माता-पिता के लिए (या रिपोर्ट त्रुटि) टूट जाएगी, तो आपके पास कोई सुराग नहीं होगा और प्रबंधन करना कठिन होगा। [यह सब प्रभावी नहीं है, लेकिन यहां लिखा है क्योंकि जब मैं रिएक्ट सीख रहा था तो मैं इसका अनुसरण करता था: पी]

  2. पैरेंट कंपोनेंट में ट्राइ try/catch का उपयोग करना और किसी भी चाइल्ड कंपोनेंट पर आंख मूंदकर भरोसा न करना और कुछ गलत होने पर एरर मैसेज दिखाना। जब आप अपने सभी घटक में try/catch का उपयोग कर रहे हैं, तो आप किसी भी अनुबंध को पूरा नहीं करने पर घटकों से त्रुटि को सुरक्षित रूप से फेंक सकते हैं।

कौन सा दृष्टिकोण सही है और क्या पेशेवरों और विपक्ष हैं?

आईएमओ, दूसरा दृष्टिकोण (घटकों में try/catch और आवश्यकता पूरी नहीं होने पर त्रुटि फेंकना) मान्य है और सभी मुद्दों को हल करेगा। घटक के लिए परीक्षण लिखते समय जब प्रॉप्स पास नहीं होते हैं तो आप घटक को लोड करते समय एक त्रुटि की उम्मीद कर सकते हैं।

अद्यतन करें

यदि आप React> 16 का उपयोग कर रहे हैं, तो here त्रुटियों को संभालने का तरीका है।

मैं एक रिएक्ट एप्लिकेशन के लिए विकास के बीच में हूं और यह वह तरीका है जो मैंने अपने घटकों के लिए उपयोग किया है: मैं उन प्रोप्स को मान्य करता हूं जो मुझे PropTypes सत्यापन का उपयोग करने के लिए प्राप्त होने की उम्मीद है लेकिन मैं इसे टालने के लिए अभी भी डिफ़ॉल्ट मान प्रदान करता हूं। टूट जाता है अगर प्राप्त डेटा में कुछ गलत हो जाता है

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

कौन सा दृष्टिकोण सही है और क्या पेशेवरों और विपक्ष हैं?

मेरे विचार के लिए भोजन के रूप में कुछ विचार ..

मेरे प्रारंभिक दृष्टिकोण के बाद, परीक्षणों में मैं स्पष्ट रूप से कुछ अमान्य डेटा का परीक्षण करने के लिए घटक के लिए डिफ़ॉल्ट मानों का परीक्षण करता हूं और एक मान्य स्नैपशॉट के प्रिंट होने की उम्मीद करता हूं। कुछ खराब डेटा के कारण परीक्षण विफल नहीं होते हैं, लेकिन मैं PropTypes सत्यापन चेतावनियों को प्रिंट करता हूं (जो कि त्रुटियों में परिवर्तित हो सकता है, अगर मैं चाहता था - मुझे लगता है - या परीक्षण में उन्हें बाहर निकाल दिया गया)।

परीक्षण और वास्तविक अनुप्रयोग दोनों में ये चेतावनी केवल एक त्रुटि को देखने से अधिक संक्षिप्त और स्पष्ट है, जिसमें कहा गया है कि "अपरिभाषित से 'someProp' नहीं पढ़ सकते हैं" या इसी तरह (और रिएक्ट को साइकिल ब्रेक प्रदान करते हैं)। प्रॉपटाइप सत्यापन सीधे और स्पष्ट रूप से आपको बताता है कि आपने क्या गलत किया (आप प्रोप के रूप में गलत प्रकार में पारित हुए, प्रोप पूरी तरह से गायब था, आदि)।

परीक्षण के बजाय दूसरे दृष्टिकोण का उपयोग करना विफल हो जाता है क्योंकि ऐप टूट जाता है। मुझे लगता है कि यह केवल एक अच्छा तरीका है यदि परीक्षण कवरेज वास्तव में अच्छा (90/100%) है अन्यथा यह एक जोखिम है - यह उत्पाद की प्रतिष्ठा को बर्बाद करने वाले किनारे के मामलों में लाइव और ब्रेक कर सकता है। रिफैक्टरिंग या आवश्यकताओं में परिवर्तन अक्सर होता है और कुछ किनारे के मामले अवांछित डेटा के साथ समाप्त हो सकते हैं जो एप्लिकेशन को तोड़ते हैं और स्वचालित या मैन्युअल परीक्षणों में कैप्चर नहीं किए गए थे।

इसका मतलब यह है कि जब एप्लिकेशन लाइव होता है तो कोड कुछ खराब डेटा के कारण मूल घटक में टूट सकता है और संपूर्ण एप्लिकेशन काम करना बंद कर देता है, जहां पहले मामले में ऐप लचीला होता है और बस कुछ खाली क्षेत्रों को नियंत्रित तरीके से प्रदर्शित करता है।

विचार?

एक सरल उदाहरण का अनुसरण करता है:

प्रतिक्रिया घटक

import React from 'react';
import PropTypes from 'prop-types';
import styles from './styles.css';

export const App = ({ person : { name, surname, address, subscription } = {} }) => (
  <div style={styles.person}>
    <p> {person.name} </p>
    <p> {person.surname} </p>
    <p> {person.address} </p>
    <div>
    {
      person.subscription &&
       <Subscription details={person.subscription} />
    }
    </div>
  </div>
);

// PS. this is incorrect in this example (as pointed out in an answer). Real code used inline initialization.
// App.defaultProps = { 
//  person: { subscription: undefined },
// };

App.propTypes = {
  person: PropTypes.shape({
    name: PropTypes.string.isRequired,
    surname: PropTypes.string.isRequired,
    address: PropTypes.string,
    subscription: PropTypes.object,
  }).isRequired,
};

परीक्षा

import React from 'react';
import { shallow } from 'enzyme';
import { mockOut } from 'testUtils/mockOut';

import { App } from '../index.js';

describe('<App>', () => {
  mockout(App, 'Subscription');

  it('renders correctly', () => {
    const testData = {
      name: 'a name',
      surname: 'a surname',
      address: '1232 Boulevard Street, NY',
      subscription: { some: 'data' },
    }
    const tree = shallow(<App person={testData} />);
    expect(tree.html()).toMatchSnapshot();
  });

  it('is resilient in case of bad data - still generates PropTypes validation logs', () => {
    const tree = shallow(<App person={undefined} />);
    expect(tree.html()).toMatchSnapshot();
  });
});

अद्यतन करें:

प्रश्न का मुख्य ध्यान इस बात पर है कि क्या यह सही है या नहीं कि डिफ़ॉल्ट मानों को असाइन करने के लिए है जो कि असमान के साथ चिह्नित हैं (उनकी अनुपस्थिति को घटक को तोड़ने के बजाय)


घटक defaultProps माध्यम से .isRequred प्रॉप्स के लिए डिफ़ॉल्ट मान निर्दिष्ट करना सही नहीं है। आधिकारिक डॉक्स के अनुसार:

DefaultProps का उपयोग यह सुनिश्चित करने के लिए किया जाएगा कि यह। Props.name का मान होगा यदि यह मूल घटक द्वारा निर्दिष्ट नहीं किया गया था। DefaultProps के हल होने के बाद PropTypes टाइप-चेकिंग होती है, इसलिए टाइप-चेकिंग defaultProps पर भी लागू होगी।

यदि आप Component.defaultProps में डिफ़ॉल्ट गुण मान सेट करते हैं, तो आपको यह चेतावनी कभी नहीं मिलेगी यदि यह प्रस्ताव मूल घटक द्वारा प्रदान नहीं किया गया है।







resiliency