Як ви перевіряєте відсутність елемента за допомогою бібліотеки жарту та реакції-тестування?

У мене є бібліотека компонентів, для якої я пишу модульні тести для використання Jest та реакції-тестування-бібліотеки. На основі певного реквізиту або подій я хочу перевірити, що певні елементи не відображаються.

getByText, getByTestIdІ т.д. кидок і помилки в react-testing-libraryразі , якщо елемент не знайдений викликає тест на провал до expectфункції пожеж.

Як ви можете перевірити щось, що не існує в жарті, використовуючи бібліотеку реакцій-тестування?

З Документів бібліотеки тестування DOM - Зовнішній вигляд та зникнення

Елементи, що стверджують, відсутні

Стандартні getByметоди кидають помилку , коли вони не можуть знайти елемент, так що якщо ви хочете , щоб зробити твердження , що елемент НЕ присутній в DOM, ви можете використовувати queryByAPI , замість того, щоб :

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

Версія queryAllAPI повертає масив відповідних вузлів. Довжина масиву може бути корисною для тверджень після додавання або видалення елементів із DOM.

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

not.toBeInTheDocument

Бібліотека jest-domутиліти забезпечує .toBeInTheDocument()збіг, за допомогою якого можна стверджувати, що елемент знаходиться в тілі документа чи ні. Це може бути більш значущим, ніж твердження результату запиту 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/ queryAllBy.

Як ти кажеш, getBy*і getAllBy*викинь помилку, якщо нічого не знайдено.

Однак, еквівалентні методи queryBy*і queryAllBy*замість того, щоб повернути nullабо []:

queryBy

queryBy*запити повертають перший відповідний вузол запиту та повертають, nullякщо жоден елемент не збігається. Це корисно для ствердження елемента, якого немає. Це викидає, якщо знайдено більше одного збігу (натомість використовуйте queryAllBy).

queryAllBy queryAllBy* запити повертають масив усіх відповідних вузлів для запиту та повертають порожній масив ( []), якщо жоден елемент не збігається.

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

Тож для конкретних двох, про які ви згадали, ви б замість цього використовували queryByTextта queryByTestId, але вони працюють для всіх запитів, а не лише для цих двох.

Вам потрібно використовувати queryByTestId замість getByTestId.

Тут приклад коду, де я хочу перевірити, чи не існує компонент з ідентифікатором "car".

 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 * видає помилку, коли не знаходить елементів, тому ви можете перевірити це

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

Ви можете скористатися бібліотекою реакції-рідного тестування "getAllByType", а потім перевірити, чи є компонент нульовим. Має ту перевагу, що не потрібно встановлювати TestID, також слід працювати зі сторонніми компонентами

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