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使用选择器，我最好的选择是在我的div上使用put className="something"，即使我根本不使用它们作为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 syntax css选择器。

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

1 个答案: