酶`.find(selector)`似乎没有找到选择器答案

【问题标题】：Enzyme `.find(selector)` does not seem to find a selector酶`.find(selector)`似乎没有找到选择器
【发布时间】：2018-09-07 21:44:48
【问题描述】：

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 有关，但安装时也是如此。我在这里是白痴吗？这和组件中的map函数有关系吗？

操作系统：OSX
开玩笑 23.5
酶 3.5.0

【问题讨论】：

标签： javascript css jestjs enzyme jsdom

【解决方案1】：

看起来那是因为您没有直接在从 render 方法返回的 JSX 中使用 <span/> 而是将其分配给一个变量，然后将该变量添加到 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 找不到任何东西。

【讨论】：