Как найти количество элементов, содержащих определенное значение в React, Jest и Enzyme

Question

Я ищу решение с использованием React, Jest и Enzyme. Я новичок в этих технологиях.

Я мог бы запустить несколько простых тестов. Теперь вот что я хочу проверить:

<div className="trow">
            <div className="tcolid" >101</div>
            <div className="tcolname">Joe</div>
            <div className="tcolgender">M</div>
          </div>

          <div className="trow">
            <div className="tcolid" >102</div>
            <div className="tcolname">Abc</div>
            <div className="tcolgender">F</div>
          </div>

          <div className="trow">
            <div className="tcolid" >103</div>
            <div className="tcolname">Xyz</div>
            <div className="tcolgender">F</div>
          </div>
          ...
          ...

Мой компонент React потребляет данные из остальных API. API может возвращать несколько записей мужского и / или женского пола. Мое требование - обеспечить отображение только одного работника мужского пола в пользовательском интерфейсе. Я добился этого - не проблема.

Когда я пишу тесты с использованием Jest и Enzyme, я хочу проверить, что при рендеринге я рендую только один элемент html со значением 'M'.

Вот что я попробовал - Jest / Enzyme это не нравится.

expect (wrapper.find("div.tcolgender").text()).toEqual("M").toHaveLength(1);

Это не работает. Я посмотрел на Enzyme API - не найти «подсчитать» или подобный метод. Примечание. Это «полный» рендер, а не «мелкий» рендер.

Answer 1

вы можете написать свой селектор, чтобы он соответствовал всем div s с M содержимым

const children = wrapper.find('div.tcolgender[children="M"]')

и утверждать, что длина дочерних элементов будет

expect(children).toHaveLength(1);

рабочий пример