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


95

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?

Jawaban:


201

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

4
Kentcdodds burukku, terima kasih. Saya menggunakan getByTestIddan mendapatkan kesalahan yang sama. Dan, saya tidak memeriksa FAQ, maaf. Perpustakaan yang bagus! Dapatkah Anda mengubah jawaban Anda untuk menyertakan `.toBeNull ();
Sesuatu Pada

3
Saya percaya tautan di atas dimaksudkan untuk menunjuk ke dokumen perpustakaan pengujian-reaksi
pbre

2
Situs dokumen baru telah diterbitkan beberapa hari yang lalu. Saya seharusnya menggunakan tautan yang lebih permanen. Terima kasih atas pembaruan @pbre!
kentcdodds


6
dan queryByTextbagi mereka yang menginginkan yang setara dengan getByTextitu adalah nol aman
S ..

22

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.


2
Ini jauh lebih baik daripada jawaban yang diterima. Apakah API ini lebih baru?
RubbelDieKatz

1
Terima kasih atas kata-katanya yang baik! Ini pada dasarnya memiliki fungsi yang sama dengan jawaban yang diterima , jadi menurut saya ini bukan API yang lebih baru (tapi saya bisa saja salah). Satu-satunya perbedaan nyata antara jawaban ini dan yang diterima adalah bahwa jawaban yang diterima mengatakan bahwa hanya ada metode yang melakukan ini ( queryByTestId) padahal sebenarnya ada dua rangkaian metode, yang queryByTestIdmerupakan salah satu contoh spesifik.
Sam

Terima kasih, saya lebih memilih ini daripada menetapkan test-id
Hylle

13

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

4

getBy * melontarkan kesalahan saat tidak menemukan elemen, jadi Anda dapat memeriksanya

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

0

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

Jenis ini melanggar premis karena tidak memiliki detail implementasi (seperti nama komponen) dalam pengujian.
RubbelDieKatz
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.