Do not find a
Element#find() (and variants) or
Element#query(), you may run into an issue where the component reference
you're trying to find is not found. This is usually caused by component references that are wrapped
React.memo(), as memo components do not appear in the reconciled tree, and as such, cannot be
To work around this, the component that is being wrapped by
React.memo() is the one that should be
used, not the memoized component. A typical pattern in HOCs is to provide the wrapped component as
a static property, like
Foo.WrappedComponent, which can also be used.
String interpolation must match for
When an element uses interpolation within its children, and you're attempting to find a node using an element (and not a string), the expectation must also use interpolation. For example, take this component that renders a user's name, and some assertions checking for a node.
The reason the latter doesn't work is because of how React's internals work. When interpolation is
children prop becomes an array, resulting in the rendered children to be
['Bruce', ' ', 'Wayne'], while the expectation's children is simply
'Bruce Wayne'. These do not
match! To fix this, the expectation must also use matching interpolations.
When in doubt, just use strings!