styled()
function will wrap the target in several intermediate React nodes. This is annoying when used with Enzyme's mount()
because if you are finding nodes using a data-test
attribute or something similar, you will get multiple matches because Styled Components forwards all props on the intermediate nodes.styled()
to wrap a non-DOM node component that doesn't properly forward the data attribute, you will still be able to find this attribute in tests. This can lead to false matches in cases where the wrapped component will conditionally render the node that ultimately receives the data attribute, because the wrapper node will always have the attribute.