Jak sprawdzić, czy element nie istnieje, używając żartu i biblioteki-testu-reagowania?

Mam bibliotekę komponentów, którą piszę testy jednostkowe do używania Jest i bibliotekę reagowania. Na podstawie niektórych rekwizytów lub wydarzeń chcę sprawdzić, czy określone elementy nie są renderowane.

getByText, getByTestIditp. zgłoszenie i błąd, react-testing-libraryjeśli element nie zostanie znaleziony, co powoduje niepowodzenie testu przed uruchomieniem expectfunkcji.

Jak przetestować coś, co nie istnieje w żartach, korzystając z biblioteki React-testing?

Z dokumentów DOM Testing-library - wygląd i znikanie

Nie ma elementów potwierdzających

Standardowe getBymetody generują błąd, gdy nie mogą znaleźć elementu, więc jeśli chcesz stwierdzić, że elementu nie ma w DOM, możesz queryByzamiast tego użyć interfejsów API:

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

Wersja queryAllAPI zwraca tablicę pasujących węzłów. Długość tablicy może być przydatna do potwierdzeń po dodaniu lub usunięciu elementów z DOM.

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

not.toBeInTheDocument

jest-domBiblioteka Narzędzie zapewnia .toBeInTheDocument()matcher, który może być wykorzystywany do stwierdzenia, że element jest w treści dokumentu, czy też nie. Może to być bardziej znaczące niż potwierdzenie wyniku zapytania 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()

Użyj queryBy/ queryAllBy.

Jak mówisz, getBy*i getAllBy*wyrzuć błąd, jeśli nic nie zostanie znalezione.

Jednak równoważne metody queryBy*i queryAllBy*zamiast tego zwracają nulllub []:

zapytanie wg

queryBy*zapytania zwracają pierwszy pasujący węzeł dla zapytania i zwracają, nulljeśli żadne elementy nie są zgodne. Jest to przydatne do potwierdzania elementu, którego nie ma. Jest to generowane, jeśli zostanie znalezionych więcej niż jedno dopasowanie (zamiast tego użyj queryAllBy).

queryAllBy*Zapytania queryAllBy zwracają tablicę wszystkich pasujących węzłów dla zapytania i zwracają pustą tablicę ( []), jeśli żadne elementy nie są zgodne.

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

Tak więc w przypadku dwóch wymienionych, zamiast tego używałbyś queryByTexti queryByTestId, ale działają one dla wszystkich zapytań, a nie tylko tych dwóch.

Musisz użyć queryByTestId zamiast getByTestId.

Oto przykład kodu, w którym chcę sprawdzić, czy komponent o identyfikatorze „samochód” nie istnieje.

 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 * zgłasza błąd, gdy nie znajduje elementów, więc możesz to sprawdzić

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

Możesz skorzystać z biblioteki react-native-testing-library „getAllByType”, a następnie sprawdzić, czy składnik jest pusty. Ma tę zaletę, że nie musi ustawiać TestID, powinien również działać z komponentami innych firm

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