Jest - Come trovare il componente DOM reso con id?

Question

Sto scrivendo un semplice test Jest che verifica che il mio componente sia stato reso. Vedo che TestUtils di React ha funzioni per trovare i componenti renderizzati per classe o per tag, ma non per il loro attributo ID. Esiste una funzione findAllInRenderedTree, ma la documentazione non spiega cosa dovrebbe aspettarsi il callback.

Direi che il callback riceverà una sorta di oggetto element, che non è un normale elemento DOM o un normale componente React. Che cosa viene trasmesso esattamente al callback findAllInRenderedTree e come dovrei ottenere i suoi attributi, o almeno il suo ID?

Vorrei solo console.log gli argomenti del callback, ma sto facendo fatica a far funzionare la console in un test Jest.

Answer 1

L'argomento callback di findAllInRenderedTree viene passata un'istanza componente e dovrebbe restituire un booleano che indica se il componente deve essere mantenuto nella matrice di uscita.

Nel tuo caso, per trovare tutti i componenti DOM resi con un dato id:

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

Se si deve confrontare con gli attributi del reale DOM nodo, è possibile utilizzare React.findDOMNode(inst) per recuperare il nodo DOM di un data istanza del componente.