Bagaimana Anda menguji tidak adanya elemen menggunakan jest dan react-testing-library?

Saya memiliki pustaka komponen yang saya tulis untuk unit test menggunakan Jest dan react-testing-library. Berdasarkan alat peraga atau peristiwa tertentu, saya ingin memverifikasi bahwa elemen tertentu tidak dirender.

getByText,, getByTestIddll. melempar dan membuat kesalahan react-testing-libraryjika elemen tidak ditemukan yang menyebabkan pengujian gagal sebelum expectfungsi diaktifkan.

Bagaimana Anda menguji sesuatu yang tidak ada dalam lelucon menggunakan react-testing-library?

Dari Pustaka Pengujian DOM Dokumen - Penampilan dan Penghilangan

Elemen yang menegaskan tidak ada

Metode standar getBymemunculkan kesalahan ketika mereka tidak dapat menemukan elemen, jadi jika Anda ingin membuat pernyataan bahwa sebuah elemen tidak ada di DOM, Anda dapat menggunakan queryByAPI sebagai gantinya:

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

Versi queryAllAPI mengembalikan larik node yang cocok. Panjang larik bisa berguna untuk pernyataan setelah elemen ditambahkan atau dihapus dari DOM.

const submitButtons = screen.queryAllByText('submit')
expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

The jest-domperpustakaan utilitas menyediakan .toBeInTheDocument()matcher, yang dapat digunakan untuk menegaskan bahwa unsur dalam tubuh dokumen, atau tidak. Ini bisa lebih bermakna daripada menegaskan hasil kueri 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()

Gunakan queryBy/ queryAllBy.

Seperti yang Anda katakan, getBy*dan getAllBy*melempar kesalahan jika tidak ada yang ditemukan.

Namun, metode yang setara queryBy*dan queryAllBy*sebaliknya mengembalikan nullatau []:

queryBy

queryBy*queries mengembalikan node pertama yang cocok untuk sebuah kueri, dan mengembalikan nulljika tidak ada elemen yang cocok. Ini berguna untuk menegaskan elemen yang tidak ada. Ini melempar jika lebih dari satu kecocokan ditemukan (gunakan queryAllBy sebagai gantinya).

queryAllBy*Kueri queryAllBy mengembalikan larik dari semua simpul yang cocok untuk sebuah kueri, dan mengembalikan larik kosong ( []) jika tidak ada elemen yang cocok.

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

Jadi untuk dua spesifik yang Anda sebutkan, Anda malah akan menggunakan queryByTextdan queryByTestId, tetapi ini berfungsi untuk semua kueri, bukan hanya keduanya.

Anda harus menggunakan queryByTestId sebagai ganti getByTestId.

Berikut adalah contoh kode di mana saya ingin menguji apakah komponen dengan id "car" tidak ada.

 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 * melontarkan kesalahan saat tidak menemukan elemen, jadi Anda dapat memeriksanya

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

Anda dapat menggunakan react-native-testing-library "getAllByType" dan kemudian memeriksa untuk melihat apakah komponen tersebut null. Memiliki keuntungan karena tidak harus mengatur TestID, juga harus bekerja dengan komponen pihak ketiga

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