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
, getByTestId
itp. zgłoszenie i błąd, react-testing-library
jeśli element nie zostanie znaleziony, co powoduje niepowodzenie testu przed uruchomieniem expect
funkcji.
Jak przetestować coś, co nie istnieje w żartach, korzystając z biblioteki React-testing?
źródło
getByTestId
i otrzymałem ten sam błąd. Przepraszam, nie sprawdziłem FAQ. Świetna biblioteka! Czy możesz zmodyfikować swoją odpowiedź, aby zawierała `.toBeNull ();queryByText
dla tych, którzy chcą, aby odpowiednikgetByText
tego był zerowyUżyj
queryBy
/queryAllBy
.Jak mówisz,
getBy*
igetAllBy*
wyrzuć błąd, jeśli nic nie zostanie znalezione.Jednak równoważne metody
queryBy*
iqueryAllBy*
zamiast tego zwracająnull
lub[]
:https://testing-library.com/docs/dom-testing-library/api-queries#queryby
Tak więc w przypadku dwóch wymienionych, zamiast tego używałbyś
queryByText
iqueryByTestId
, ale działają one dla wszystkich zapytań, a nie tylko tych dwóch.źródło
queryByTestId
), podczas gdy w rzeczywistości istnieją dwa całe zestawy metod, z którychqueryByTestId
jeden jest konkretnym przykładem.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(); }); });
źródło
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');
źródło
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(); });
źródło