উপহাস এবং প্রতিক্রিয়া-পরীক্ষার-লাইব্রেরি ব্যবহার করে কোনও উপাদানটির অস্তিত্বের জন্য আপনি কীভাবে পরীক্ষা করবেন?

Question

আমার একটি উপাদান লাইব্রেরি রয়েছে যা আমি জেস্ট ব্যবহার করার জন্য ইউনিট পরীক্ষাগুলি লিখছি এবং প্রতিক্রিয়া পরীক্ষা-লাইব্রেরি করব। নির্দিষ্ট প্রপস বা ইভেন্টের ভিত্তিতে আমি যাচাই করতে চাই যে নির্দিষ্ট উপাদানগুলি রেন্ডার করা হচ্ছে না।

getByText, getByTestIdইত্যাদি ফাংশন আগুনের react-testing-libraryআগে পরীক্ষায় ব্যর্থ হওয়ার কারণ হিসাবে যদি উপাদানটি খুঁজে পাওয়া যায় না তবে তা ছুঁড়ে ফেলুন এবং ত্রুটি করুন expect।

প্রতিক্রিয়া-পরীক্ষা-লাইব্রেরি ব্যবহার করে ঠাট্টায় বিদ্যমান না এমন কোনও কিছুর জন্য আপনি কীভাবে পরীক্ষা করবেন?

Answer 1

থেকে করে DOM টেস্টিং-গ্রন্থাগার ডক্স - চেহারা এবং অন্তর্ধান

জোর দেওয়ার উপাদান উপস্থিত নেই

স্ট্যান্ডার্ড getByপদ্ধতিগুলি যখন কোনও উপাদান খুঁজে না পায় তখন একটি ত্রুটি ফেলে দেয়, সুতরাং যদি আপনি একটি ডিওমে উপস্থিত থাকেন না যে কোনও উপাদানটি দাবি করতে চান , আপনি queryByপরিবর্তে এপিআই ব্যবহার করতে পারেন :

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

queryAllAPI গুলি সংস্করণ মিলে নোড একটি অ্যারের ফিরে যান। অ্যারের দৈর্ঘ্য ডিওএম থেকে উপাদানগুলি যুক্ত বা সরিয়ে ফেলার পরেও নির্ধারণের জন্য কার্যকর হতে পারে।

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()

Comments

আমার খারাপ কেন্টকড্ডস, আপনাকে ধন্যবাদ। আমি getByTestIdএকই ত্রুটি ব্যবহার করেছি এবং পেয়েছি। এবং, আমি FAQ চেক করিনি, দুঃখিত। দুর্দান্ত গ্রন্থাগার! আপনি answer .toBeNull () অন্তর্ভুক্ত করতে আপনার উত্তর পরিবর্তন করতে পারেন;

— কিছু হয়েছে

আমি বিশ্বাস করি উপরের লিঙ্কটি প্রতিক্রিয়া-পরীক্ষা-গ্রন্থাগার ডক্সের

— পিবিবি

নতুন ডক্স সাইটটি কিছুদিন আগে প্রকাশিত হয়েছিল। আমার আরও স্থায়ী লিঙ্ক ব্যবহার করা উচিত ছিল। আপডেট @ পিবিআর জন্য ধন্যবাদ!

— কেন্টকডডস

আর একটি সহজ সংস্থান: টেস্টিং

— কিছু

এবং queryByTextযারা এর সমতুল্য চান তাদের getByTextজন্য নাল নিরাপদ

— এস ..

Answer 2

ব্যবহার queryBy/ queryAllBy।

যেমনটি আপনি বলেছেন, getBy*এবং getAllBy*কিছু না পাওয়া গেলে একটি ত্রুটি নিক্ষেপ করুন।

তবে, সমতুল্য পদ্ধতি queryBy*এবং queryAllBy*পরিবর্তে ফিরে nullবা []:

ক্যোয়ারী বাই

queryBy*ক্যোরিগুলি কোনও ক্যোয়ারির জন্য প্রথম ম্যাচিং নোড ফেরত দেয় এবং nullকোনও উপাদান মেলে না তবে ফিরে আসে । এটি উপস্থিত নেই এমন একটি উপাদান বলার জন্য দরকারী। একাধিক ম্যাচ পাওয়া গেলে এটি ছুড়ে ফেলে (পরিবর্তে ক্যোরিঅলবি ব্যবহার করুন)।

queryAllBy queryAllBy* প্রশ্নের একটি ক্যোয়ারী জন্য সব ম্যাচিং নোড একটি অ্যারের ফিরে আসুন, এবং একটি খালি অ্যারে ফিরে ( []) যদি কোন উপাদানের সাথে মেলে না।

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

সুতরাং আপনি উল্লেখ করেছেন এমন দুটি নির্দিষ্ট ক্ষেত্রে, আপনি পরিবর্তে queryByTextএবং ব্যবহার করতে চাইবেন queryByTestId, তবে এইগুলি কেবলমাত্র দুটি নয়, সমস্ত প্রশ্নের জন্য কাজ করবে।

Comments

এটি গৃহীত উত্তরের চেয়ে ভাল। এই এপিআই কি নতুন?

— রুবেলডিয়েকাটজ

ধরনের শব্দ জন্য ধন্যবাদ! এটি মূলত স্বীকৃত উত্তরের মতো একই কার্যকারিতা , তাই আমি মনে করি না এটি একটি নতুন এপিআই (তবে আমি ভুল হতে পারি)। এই উত্তর এবং গৃহীত উত্তরগুলির মধ্যে একমাত্র আসল পার্থক্যটি হ'ল গৃহীত উত্তরটি বলে যে কেবলমাত্র একটি পদ্ধতি রয়েছে যা এটি করে ( queryByTestId) যখন বাস্তবে দুটি পদ্ধতির পুরো সেট থাকে, যার queryByTestIdএকটি নির্দিষ্ট উদাহরণ।

— স্যাম

ধন্যবাদ আমি টেস্ট-

— আইডির

Answer 3

আপনাকে getByTestId এর পরিবর্তে ক্যোয়ারবিটাইস্টআইডি ব্যবহার করতে হবে।

এখানে একটি কোড উদাহরণ যেখানে আমি পরীক্ষা করতে চাই যেখানে "গাড়ি" আইডি সহ উপাদানটি বিদ্যমান নেই।

 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();
  });
});

Answer 4

একটি উপাদান খুঁজে না পেয়ে getBy * ত্রুটি ছুড়ে দেয়, যাতে আপনি এটি পরীক্ষা করতে পারেন

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

Answer 5

আপনি রিট্যাক্ট-নেটিভ-টেস্টিং-লাইব্রেরি "getAllByType" ব্যবহার করতে পারেন এবং তারপরে উপাদানটি বাতিল কিনা তা পরীক্ষা করতে পারেন। টেস্টআইডি সেট না করার সুবিধা রয়েছে, তৃতীয় পক্ষের উপাদানগুলির সাথেও কাজ করা উচিত

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

Comments

পরীক্ষায় প্রয়োগের বিবরণ (যেমন উপাদানটির নাম) না রাখার প্রতিরোধ এই ধরণের লঙ্ঘন।

— রুবেলডিয়েকাটজ