Jest - So finden Sie gerenderte DOM-Komponente mit ID?

Question

Ich schreibe einen einfachen Jest-Test, der überprüft, dass meine Komponente gerendert wird. Ich sehe, dass React's TestUtils Funktionen hat, um gerenderte Komponenten nach Klassen oder nach Tags zu suchen, aber nicht nach ihrem ID-Attribut. Es gibt eine findAllInRenderedTree Funktion, aber die Dokumentation erklärt nicht, was der Rückruf erwarten sollte.

Ich würde vermuten, dass der Callback eine Art von Element-Objekt erhalten wird, die kein normales DOM-Element oder eine normale React-Komponente ist. Was genau wird an findAllInRenderedTree Callback übergeben, und wie soll ich seine Attribute oder zumindest seine ID bekommen?

Ich würde nur console.log die Argumente des Rückrufs, aber ich habe eine harte Zeit bekommen Konsole in einem Jest-Test zu arbeiten.

Answer 1

Das Callback-Argument findAllInRenderedTree bekommt eine Komponenteninstanz übergeben und soll eine Boolesche zurückgeben, die in dem Ausgangsfeld angibt, ob die Komponente zu halten.

In Ihrem Fall alle gemacht DOM-Komponenten mit einer bestimmten ID zu finden:

function scryRenderedDOMComponentsWithId(tree, id) { 
    return TestUtils.findAllInRenderedTree(tree, function(inst) { 
    return TestUtils.isDOMComponent(inst) && inst.getAttribute("id") === id; 
    }); 
} 

Wenn Sie gegen Attribute des aktuellen DOM-Knoten testen müssen, können Sie React.findDOMNode(inst) verwenden, um den DOM-Knoten eines abrufen gegebene Komponenteninstanz.