मैं वर्तमान में प्रतिक्रिया-चयन घटक का मजाक उड़ाने की कोशिश कर रहा हूं और कोई फर्क नहीं पड़ता कि मैं क्या करता हूं। प्रतिक्रिया-परीक्षण-लाइब्रेरी से परिवर्तन केवल firevent.change की पहली कॉल पर ही आग लगती है।

मैं सोच रहा था कि परिवर्तन केवल एक बार क्यों सक्रिय हो रहा था और इसे कैसे ठीक किया जाए।

मेरा जेस्ट मॉक इस प्रकार है:

jest.mock("react-select", () => ({ options, value, onChange }) => {
  function handleChange(event) {
    console.log("called");

    const option = options.find(option => {
      return option.value == event.currentTarget.value;
    });

    onChange(option);
  }
  return (
    <select
      id="uc"
      data-testid="select"
      value={value}
      onChange={event => handleChange(event)}
    >
      {options?.map(({ label, value }) => (
        <option key={value} value={value}>
          {label}
        </option>
      ))}
    </select>
  );
});

जैसा कि आप इसे काफी सरल चयन ब्लॉक देख सकते हैं और मैंने सोचा कि मुझे कॉल करने में सक्षम होना चाहिए।

fireEvent.change(selectOptions[0], { target: { value: "0" } });

और यह काम करेगा हालांकि अगर मैं उन्हें निम्नलिखित उदाहरण में एक साथ श्रृंखलाबद्ध करता हूं:

test("Should render add another button and function", () => {
  const mockSetOpen = jest.fn();

  const { queryAllByTestId, getByTestId, getByLabelText, debug } = renderWithRedux(
    <TabByRestraints setOpen={mockSetOpen} hidden={false} />,
    {
      userCatagories: userCategoriesMock,
      permissionGroups: permissionGroupsMock,
      roles: rolesMock
    }
  );

  // Check that the user catagories exist and user catagories values
  const selectOptions = queryAllByTestId("select");
  expect(selectOptions).toHaveLength(2);

  expect(getByTestId("user-category-row")).toBeTruthy();

  fireEvent.change(selectOptions[0], { target: { value: "0" } });
  fireEvent.change(selectOptions[1], { target: { value: "132" } });

  expect(getByLabelText("Add a new user category restraint")).toBeTruthy();
});

मैं देख सकता हूं कि कंसोल.लॉग ("कॉल किया गया") केवल एक बार निकाल दिया जाता है। परीक्षण विफल होने से पहले पृष्ठ पर दूसरे चयन का मूल्य कभी नहीं चुना जाता है।

मैं परिवर्तन घटना को प्रेषित करने के लिए दोनों परिवर्तन करना चाहता हूं।

fireEvent.change(selectOptions[0], { target: { value: "0" } });
fireEvent.change(selectOptions[1], { target: { value: "132" } }); 

हालांकि यह केवल पहले का सेट करता है।

किसी भी मदद की बहुत सराहना की।

7
Morphasis 18 फरवरी 2020, 13:40
क्या आप सुनिश्चित हैं कि fireEvent.change के निष्पादन के समय प्रदान किए गए दूसरे चयन के लिए मूल्य 132 के साथ एक विकल्प है?
 – 
Christos Lytras
21 फरवरी 2020, 18:26
हां क्योंकि मैंने डीबग() का उपयोग किया था और मैं वहां मूल्यों के साथ सही विकल्प प्रदान करने वाले विकल्प देख सकता हूं। मैंने फिर से उसी चयन का उपयोग करके परीक्षण किया (चयन विकल्प [0]) लेकिन इसके बजाय इसके मूल्य को फिर से बदलने के बजाय एक ही मुद्दा दुख की बात है।
 – 
Morphasis
21 फरवरी 2020, 18:45
मैं बहुत उत्सुक हूं कि यह काम क्यों नहीं कर रहा है, इसलिए मैंने react-select का उपयोग करके ऐसे मूल्यों के साथ 2 चुनिंदा इनपुट प्रस्तुत करने के लिए एक साधारण रिएक्ट ऐप बनाया। यह मेरे लिए ठीक काम कर रहा है। यह रहा स्क्रीनशॉट। बेशक मैंने किसी भी राज्य प्रबंधन को रेडक्स के साथ लागू नहीं किया है जो अपराधी हो सकता है, लेकिन मुझे यकीन नहीं है। अंतर केवल इतना है कि मैं renderWithRedux के बजाय @testing-library/react से render का उपयोग कर रहा हूं। यदि आप दिलचस्प हैं तो मैं इसे एक भंडार में अपलोड कर सकता हूं।
 – 
Christos Lytras
21 फरवरी 2020, 20:03
कृपया यह अजीब करें कि राज्य परिवर्तन इसका कारण होगा। इसे शायद किसी प्रकार के टाइमआउट या वादा संरचना के साथ फिर से हल किया जा सकता है।
 – 
Morphasis
21 फरवरी 2020, 20:09
यहां आप repo देख सकते हैं। यदि आप yarn test चलाते समय परीक्षण नहीं चलाते हैं तो सभी परीक्षण चलाने के लिए बस a दबाएं। मुझे बताएं कि क्या आपको परीक्षण चलाने में कोई परेशानी है और परिणाम देखें।
 – 
Christos Lytras
21 फरवरी 2020, 20:24

2 जवाब

आपको चुनिंदा तत्वों के लिए एक और प्रश्न करना चाहिए। मैं आगे जाऊंगा और परीक्षण को पढ़ने/डीबग करने में आसान बनाने के लिए उन्हें अलग-अलग नाम दूंगा।

  // it's easier to have separate ids for each select, will be easier to read/maintain the test in the future
  const firstSelect = queryByTestId("select1");
  fireEvent.change(firstSelect, { target: { value: "0" } });

  // a rerender might have happened so you need to query for the second select after the first event.
  const secondSelect = queryByTestId("select2");
  fireEvent.change(secondSelect, { target: { value: "132" } });

  expect(getByLabelText("Add a new user category restraint")).toBeTruthy();
4
tudor.gergely 24 फरवरी 2020, 09:26

तथ्य यह है कि render काम करता है लेकिन renderWithRedux यह नहीं बताता है कि समस्या redux राज्य प्रबंधन में निहित है।

एक बात पर विचार करना चाहिए - रिएक्ट के भीतर राज्य कतारों को एक पुन: प्रस्तुत करना, जबकि Redux के लिए एक क्रिया को भेजना Redux की अपनी अद्यतन कतार में परिवर्तन को कतारबद्ध करता है। प्रतिक्रिया परीक्षण उपकरण शायद यह नहीं जानते कि इससे कैसे निपटा जाए।

हालांकि यह कोड के करीब है, आप dispatch का मजाक उड़ाने और यह सत्यापित करने पर विचार कर सकते हैं कि यह चुनिंदा परिवर्तनों के अपेक्षित परिणाम प्राप्त कर रहा है। इस तरह आप इस बात की पुष्टि कर सकते हैं कि आपका कोड काम कर रहा है, इस बात की चिंता किए बिना कि तीसरे पक्ष का कोड क्या कर रहा है। (विडंबना यह है कि आप प्रतिक्रिया-चयन का उपयोग करने से बचने की कोशिश कर रहे थे जब रेंडरविथरेडक्स वास्तविक तृतीय-पक्ष समस्या थी।: डी)

आप अपने ऑनचेंज हैंडलर को सीधे कॉल करने पर भी विचार कर सकते हैं, घटनाओं को फायर करने के बजाय इसे अपने घटक में चयन से हटा सकते हैं। यह तीसरे पक्ष के कोड की मात्रा को कम करने का एक और तरीका होगा जिसका आप परीक्षण कर रहे हैं और मजाक उड़ा रहे हैं।

2
Michael Landis 25 फरवरी 2020, 05:22