lundi 5 avril 2021

Testing DOM updates in React

In a React component I am using an external library that creates complex components that I modify slightly on render. Thus, in my own component, I use things like element queries and mutation observers to get rendered elements in the DOM and dynamically add my own modifications, depending on the state of the DOM itself (not the external component, since I cannot access its state).

This works great, but I have not been able to figure out how to test this functionality [in Jest]. In particular, I add mutation listeners that add my own small React components based on the HTML that the external component renders, adding a button when the mouse hovers over a list of dynamically-created elements. When I attempt to test this in Jest, none of this logic is performed, and the functionality I have added cannot be tested, as the changes to the DOM do not appear, even with full rendering. In particular, during testing I have found that the queries I am using in the component do not have any values, as they need the external component to fully render the HTML for my own component to observe the changes.

I need a way to test my component in a way such that the external component is rendered, but such that my own component can perform updates afterwards, when its own state changes.

How can I test the functionality of the updates that I perform that are based on element queries if there are not any results to these queries during testing?

Aucun commentaire:

Enregistrer un commentaire