कीट और प्रतिक्रिया-परीक्षण-पुस्तकालय का उपयोग करते हुए तत्व के गैर-अस्तित्व के लिए आप कैसे परीक्षण करते हैं?

Question 1

मेरे पास एक घटक पुस्तकालय है जो मैं जेस्ट और प्रतिक्रिया-परीक्षण-पुस्तकालय का उपयोग करने के लिए इकाई परीक्षण लिख रहा हूं। कुछ प्रॉप्स या घटनाओं के आधार पर मैं यह सत्यापित करना चाहता हूं कि कुछ तत्वों का प्रतिपादन नहीं किया जा रहा है।

getByText, getByTestIdआदि फेंक और त्रुटि react-testing-libraryअगर तत्व नहीं पाया जाता है, जिससे परीक्षण expectफंक्शन से पहले विफल हो जाता है ।

प्रतिक्रिया-परीक्षण-पुस्तकालय का उपयोग करके आप किसी चीज़ के लिए परीक्षण कैसे करते हैं, जो कीट में विद्यमान नहीं है?

Question 2

से डोम परीक्षण-पुस्तकालय डॉक्स - प्रकटन और विलुप्ति

मुखर तत्व मौजूद नहीं हैं

मानक getByविधियाँ एक तत्व को ढूंढने में त्रुटि उत्पन्न करती हैं, इसलिए यदि आप यह दावा करना चाहते हैं कि कोई तत्व DOM में मौजूद नहीं है , तो आप queryByइसके बजाय API का उपयोग कर सकते हैं :
const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist
queryAllएपीआई संस्करण मिलान नोड्स की एक सरणी वापस जाएँ। तत्वों को जोड़ने या DOM से निकाले जाने के बाद सरणी की लंबाई उपयोगी हो सकती है।
const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements
not.toBeInTheDocument

jest-domउपयोगिता पुस्तकालय प्रदान करता है .toBeInTheDocument()मिलान, जो बात पर जोर देना है कि एक तत्व दस्तावेज़, या नहीं के शरीर में है इस्तेमाल किया जा सकता। यह एक क्वेरी परिणाम की पुष्टि करने की तुलना में अधिक सार्थक हो सकता है null।
import '@testing-library/jest-dom/extend-expect'
// use `queryBy` to avoid throwing an error with `getBy`
const submitButton = screen.queryByText('submit')
expect(submitButton).not.toBeInTheDocument()

Question 3

का उपयोग करें queryBy/ queryAllBy।

जैसा कि आप कहते हैं, getBy*और getAllBy*अगर कुछ भी नहीं मिला है तो एक त्रुटि फेंक दें।

हालाँकि, समतुल्य विधियाँ queryBy*और queryAllBy*बदले में nullया []:

queryBy

queryBy*क्वेरी के लिए पहला मिलान नोड लौटाता है, और nullयदि कोई तत्व मेल नहीं खाता है तो वापस लौटें । यह एक तत्व को प्रस्तुत करने के लिए उपयोगी है जो मौजूद नहीं है। यह एक से अधिक मिलान पाए जाने पर फेंकता है (इसके बजाय queryAllBy का उपयोग करें)।

queryAllBy queryAllBy* क्वेरी क्वेरी के लिए सभी मिलान नोड्स की एक सरणी लौटाती हैं , और []यदि कोई तत्व मेल नहीं खाते हैं तो एक खाली सरणी ( ) लौटाते हैं ।

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

इसलिए आपके द्वारा बताए गए विशिष्ट दो के लिए, आप इसके बजाय उपयोग करेंगे queryByTextऔर queryByTestId, लेकिन ये सभी प्रश्नों के लिए काम करते हैं, केवल उन दो के लिए नहीं।

Question 4

आपको getByTestId के स्थान पर queryByTestId का उपयोग करना होगा।

यहां एक कोड उदाहरण है जहां मैं परीक्षण करना चाहता हूं कि क्या "कार" आईडी वाला घटक मौजूदा नहीं है।

 describe('And there is no car', () => {
  it('Should not display car mark', () => {
    const props = {
      ...defaultProps,
      base: null,
    }
    const { queryByTestId } = render(
      <IntlProvider locale="fr" messages={fr}>
        <CarContainer{...props} />
      </IntlProvider>,
    );
    expect(queryByTestId(/car/)).toBeNull();
  });
});

Question 5

getBy * तत्वों को नहीं खोजने पर एक त्रुटि फेंकता है, इसलिए आप उसके लिए जांच कर सकते हैं

expect(() => getByText('your text')).toThrow('Unable to find an element');

Question 6

आप प्रतिक्रिया-मूल-परीक्षण-पुस्तकालय "getAllByType" का उपयोग कर सकते हैं और फिर यह देखने के लिए जांच कर सकते हैं कि घटक अशक्त है या नहीं। टेस्टिड सेट नहीं करने का फायदा यह है कि उसे थर्ड पार्टी कंपोनेंट्स के साथ भी काम करना चाहिए

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });