คุณจะทดสอบการไม่มีอยู่ขององค์ประกอบโดยใช้ jest และ react-testing-library ได้อย่างไร?

ฉันมีไลบรารีคอมโพเนนต์ที่ฉันกำลังเขียนการทดสอบหน่วยสำหรับการใช้ Jest และ react-testing-library จากอุปกรณ์ประกอบฉากหรือเหตุการณ์บางอย่างฉันต้องการตรวจสอบว่าองค์ประกอบบางอย่างไม่ได้รับการแสดงผล

getByText, getByTestIdฯลฯ จากเส้นข้างและความผิดพลาดในreact-testing-libraryถ้าองค์ประกอบไม่พบสาเหตุที่ทำให้การทดสอบที่จะล้มเหลวก่อนที่จะexpectเกิดเพลิงไหม้ฟังก์ชั่น

คุณจะทดสอบสิ่งที่ไม่มีอยู่ใน jest โดยใช้ react-testing-library ได้อย่างไร?

จากDOM Testing-library Docs - Appearance and Disappearance

ไม่มีการยืนยันองค์ประกอบ

มาตรฐานgetByวิธีการโยนความผิดพลาดเมื่อพวกเขาไม่สามารถหาองค์ประกอบดังนั้นหากคุณต้องการที่จะให้การยืนยันว่าเป็นองค์ประกอบคือไม่ได้อยู่ใน DOM คุณสามารถใช้queryByAPIs แทน:

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

queryAllรุ่น APIs กลับอาร์เรย์ของโหนดจับคู่ ความยาวของอาร์เรย์มีประโยชน์สำหรับการยืนยันหลังจากเพิ่มหรือลบองค์ประกอบออกจาก 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()

ใช้queryBy/ queryAllBy.

อย่างที่คุณพูดgetBy*และgetAllBy*แสดงข้อผิดพลาดหากไม่พบสิ่งใด

อย่างไรก็ตามวิธีการที่เทียบเท่าqueryBy*และqueryAllBy*แทนที่จะส่งคืนnullหรือ[] :

แบบสอบถามโดย

queryBy* คิวรีส่งคืนโหนดที่ตรงกันแรกสำหรับคิวรีและส่งคืน nullหากไม่มีองค์ประกอบที่ตรงกัน สิ่งนี้มีประโยชน์สำหรับการยืนยันองค์ประกอบที่ไม่มีอยู่ สิ่งนี้จะแสดงหากพบรายการที่ตรงกันมากกว่าหนึ่งรายการ (ใช้ queryAllBy แทน)

queryAllBy*แบบสอบถามqueryAllByส่งคืนอาร์เรย์ของโหนดที่ตรงกันทั้งหมดสำหรับแบบสอบถามและส่งคืนอาร์เรย์ว่าง ([] ) หากไม่มีองค์ประกอบที่ตรงกัน

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

ดังนั้นสำหรับสองข้อที่คุณกล่าวถึงคุณจะใช้แทนqueryByTextและqueryByTestIdแต่สิ่งเหล่านี้ใช้ได้กับข้อความค้นหาทั้งหมดไม่ใช่เฉพาะสองข้อนั้น

คุณต้องใช้ queryByTestId แทน 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();
  });
});

getBy * แสดงข้อผิดพลาดเมื่อไม่พบองค์ประกอบดังนั้นคุณสามารถตรวจสอบได้

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

คุณสามารถใช้ react-native-testing-library "getAllByType" จากนั้นตรวจสอบว่าคอมโพเนนต์เป็นโมฆะหรือไม่ มีข้อได้เปรียบที่ไม่ต้องตั้งค่า TestID นอกจากนี้ควรทำงานร่วมกับส่วนประกอบของบุคคลที่สาม

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