Enzym zu testen Komponenten reagieren, die verwenden Klassen oder IDs nicht

Question

Ich habe folgend in der render Methode eines meiner Komponenten:‘

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

Es scheint, dass da Enzym arbeitet rund um Selektoren, mein Die beste Option ist es, put className="something" auf meine divs zu setzen, auch wenn ich sie nicht als CSS-Klassen verwende. Ansonsten muss ich herausfinden, wie viele divs in der Komponente Paper von Material UI sind, und einige zu komplizierte Abfragen ausarbeiten, um X-Ebenen tief in divs zu graben, nur um zu meinem anklickbaren div zu gelangen, das ich testen möchte. Ganz zu schweigen davon, wenn ich mein anklickbares div nach oben oder unten bewege, bricht es den Test, obwohl das div technisch immer noch gerendert und noch anklickbar ist.

Es sei denn, es gibt einen anderen Weg?

Answer 1

Enzyme gibt Ihnen hier einige Optionen zusätzlich zu CSS-Selektoren. Sie könnten find() mit einem React Component Constructor zuerst Ihre Paper-Komponente finden, und dann verwenden Sie einen CSS-Selektor von dort.

const myComponent = wrapper.find(Paper);

Wenn Sie wollen einfach nur sicherstellen, dass einige Kind onTouchTap gesetzt hat, können Sie den prop syntax CSS-Selektor verwenden.