Jest ve react-testing-library kullanarak bir öğenin var olmadığını nasıl test edersiniz?

Jest ve react-test-library kullanmak için birim testleri yazdığım bir bileşen kitaplığım var. Belirli sahne veya olaylara dayanarak, belirli öğelerin işlenmediğini doğrulamak istiyorum.

getByText,, getByTestIdvb react-testing-library. öğe bulunamazsa hata verir ve expectişlev çalışmadan önce testin başarısız olmasına neden olur .

React-testing-library kullanarak jest'te olmayan bir şeyi nasıl test edersiniz?

Gönderen DOM Testi-kütüphane Dokümanlar - Görünüm ve Disappearance

İddia eden öğeler mevcut değil

Standart getByyöntemler, bir öğe bulamadıklarında hata verir, bu nedenle, DOM'da bir öğenin bulunmadığına dair bir iddia yapmak isterseniz, queryBybunun yerine API'leri kullanabilirsiniz :

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

queryAllAPI versiyonu eşleşen düğümlerin bir dizi döner. Dizinin uzunluğu, DOM'a öğeler eklendikten veya kaldırıldıktan sonra yapılan ispatlarda faydalı olabilir.

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

not.toBeInTheDocument

Yardımcı jest-domprogram kitaplığı, .toBeInTheDocument()bir öğenin belgenin gövdesinde olup olmadığını belirtmek için kullanılabilen eşleştirici sağlar . Bu, bir sorgu sonucunun olduğunu iddia etmekten daha anlamlı olabilir 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/ Kullanın queryAllBy.

Dediğiniz gibi getBy*ve getAllBy*hiçbir şey bulunmazsa bir hata atın.

Bununla birlikte, eşdeğer yöntemler queryBy*ve queryAllBy*yerine geri nullya da []:

queryBy

queryBy*sorgular, bir sorgu için eşleşen ilk düğümü döndürür ve nullhiçbir öğe eşleşmezse döndürür . Bu, mevcut olmayan bir öğeyi ileri sürmek için kullanışlıdır. Bu, birden fazla eşleşme bulunursa atar (bunun yerine queryAllBy'yi kullanın).

queryAllBy queryAllBy* sorguları, bir sorgu için eşleşen tüm düğümlerin bir dizisini döndürür ve []hiçbir öğe eşleşmezse boş bir dizi ( ) döndürür .

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

Dolayısıyla, bahsettiğiniz belirli ikisi için bunun yerine queryByTextve kullanırsınız queryByTestId, ancak bunlar yalnızca bu ikisi için değil, tüm sorgular için çalışır.

GetByTestId yerine queryByTestId kullanmanız gerekir.

Burada "araba" kimliğine sahip bileşenin mevcut olup olmadığını test etmek istediğim bir kod örneği.

 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 *, bir öğe bulamadığınızda bir hata atar, böylece bunu kontrol edebilirsiniz

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

"GetAllByType" react-native-testing-library "öğesini kullanabilir ve ardından bileşenin boş olup olmadığını kontrol edebilirsiniz. TestID'yi ayarlamak zorunda olmama avantajına sahiptir, ayrıca üçüncü taraf bileşenlerle de çalışmalıdır

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