mercredi 1 juin 2016

Using Enzyme to test React components that don't use classes or IDs

I have the following in the render method of one of my components:'

  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>
      [...]

It seems that since Enzyme works around using selectors, my best option is to just use put className="something" on my divs, even if I'm not using them as CSS classes at all. Otherwise, I have to figure out how many divs are within Material UI's Paper component, and work out some overly complicated query to dig X levels deep into divs, just to get to my clickable div that I want to test. Not to mention, if I happen to move my clickable div down or up a bit, it breaks the test even though the div is technically still being rendered and still clickable.

Unless there's another way?

Aucun commentaire:

Enregistrer un commentaire