Фермент `.find (селектор)`, кажется, не находит селектор - PullRequest
Новая
       30

Фермент `.find (селектор)`, кажется, не находит селектор

0 голосов
/ 07 сентября 2018

element.find('span.active-nav-option') ничего не возвращает, а element.find('.active-nav-option') возвращает диапазон. Суть теста состоит в том, чтобы выяснить, было ли отрисовано span вместо Link.

Компонент выглядит следующим образом: 

const PageNav = ({
  router,
  slides,
}) => (
  <nav className="PageNav">
    <span className="chevron">
      <MoreVerticalIcon
        strokeWidth="0.5px"
        size="3em"
      />
    </span>
    <ul className="nav-links">
      {mapSlides(slides, router)}
    </ul>
    <style jsx>{styles}</style>
  </nav>
)

function mapSlides(slides, router) {
  return Object.entries(slides)
    .sort((
      [, { order: a }],
      [, { order: b }],
    ) => a - b)
    .map(([slidename, { altText, order }]) => {
      const isActiveLink = router.query.slidename === slidename
      const navItemClassnames = [
        'nav-item',
        isActiveLink && 'active',
      ]
        .filter(Boolean)
        .join(' ')

      const Element = isActiveLink
        ? props => <span {...props} />
        : Link

      const liInternalElementProps = {
        ...(isActiveLink && { className: 'active-nav-option' }),
        ...(!isActiveLink && {
          href: `/CVSlide?slidename=${slidename}`,
          as: `/cv/${slidename}`,
        }),
      }

      return (
        <li
          className={navItemClassnames}
          key={order}
        >
          <Element {...liInternalElementProps}>
            <a title={altText}>
              <img
                src={`/static/img/nav-icons/${slidename}.svg`}
                alt={`An icon for the ${slidename} page, ${altText}`}
              />
            </a>
          </Element>
          <style jsx>{styles}</style>
        </li>
      )
    })
}

Воспроизвести запустите эту строку в качестве теста: 

const wrapperOne = shallow(
    <PageNav
      slides={mockSlides}
      router={{
        query: {
          slidename: 'hmmm',
        },
      }}
    />
  )

const spanExists = wrapperOne
  .find('.active-nav-option')
  .html() // outputs <span class="active-nav-option">...</span>
// so one would expect span.active-nav-option to work?

const spanDoesNotExist = wrapperOne
  .find('span.active-nav-option')
  .html() // throws an error `Method “html” is only meant to be run on a single node. 0 found instead.`
// subsequently if I use `.exists()`  to test if the element exists, it returns nothing.

Ожидаемое поведение element.find('span.active-nav-option') должен вернуть span. Я думаю? Сначала я думал, что это связано с shallow против mount, но то же самое происходит с mount. Я здесь идиот? Это как-то связано с функцией карты в компоненте?

  • ОС: OSX
  • Шутка 23,5
  • фермент 3.5.0

1 Ответ

0 голосов
/ 07 сентября 2018

Похоже, это потому, что вы не используете <span/> непосредственно в JSX, возвращенном методом render, а назначаете его переменной, а затем добавляете эту переменную в JSX.

Если вы выполните console.log(wrapperOne.debug()), вы увидите следующий результат (я удалил стили и компоненты, которые вы не предоставили): 

<nav className="PageNav">
  <span className="chevron" />
  <ul className="nav-links">
    <li className="nav-item active">
      <Component className="active-nav-option">
        <a title={[undefined]}>
          <img src="/static/img/nav-icons/0.svg" alt="An icon for the 0 page, undefined" />
        </a>
      </Component>
    </li>
  </ul>
</nav>

Как видите, у вас есть <Component className="active-nav-option"> вместо <span className="active-nav-option">, поэтому span.active-nav-option не может ничего найти.

...