unit-testing - 使用 Enzyme 测试不使用类或 ID 的 React 组件

Question

我的组件之一的方法中有以下render内容：'

  return <Paper key={insight._id} style={styles[viewMode]}>
    {cardCover}

    <div style={styles[viewMode].content}>
      <div
        style={styles[viewMode].name}
        onTouchTap={_ => onClickInsight(insight._id)}
      >
        {insight.title}
      </div>
      [...]

似乎由于 Enzyme 使用选择器工作，我最好的选择是只className="something"在我的 div 上使用 put，即使我根本没有将它们用作 CSS 类。否则，我必须弄清楚 Material UI 的Paper组件中有多少个 div，并制定一些过于复杂的查询来深入挖掘 div 的 X 级别，只是为了得到我想要测试的可点击 div。更不用说，如果我碰巧将我的可点击 div 向下或向上移动了一点，它会破坏测试，即使 div 在技术上仍然被渲染并且仍然可以点击。

除非有别的办法？

Answer 1

Enzyme 在 CSS 选择器之上为您提供了一些选项。您可以find()使用React Component Constructor首先找到您的 Paper 组件，然后从那里使用 CSS 选择器。

const myComponent = wrapper.find(Paper);

如果您只是想验证某个子项是否已onTouchTap设置，则可以使用prop 语法css 选择器。