In a CRA project, I have a Header component defined and used like so:
import styled from 'styled-components/macro'
const Header = styled.h1`
font-size: 36px;
font-weight: 600;
text-transform: capitalize;
color: ${thm.text};
margin-bottom: 24px;
`;
const Greeting = () => {
return (
<Header
data-test-id="authform-greeting-header"
>
{header}
</Header>
)
}
When using Enzyme's mount and find to target the data-test-ids, my tests fail because find returns two nodes via console.log(wrapper.debug()):
<Greeting__Header data-test-id="authform-greeting-header">
<h1 data-test-id="authform-greeting-header" className="Greeting__Header-m192p8-1 boxZU">
welcome back
</h1>
</Greeting__Header>
How can I make sure that Enzyme's mount only renders these components once, thereby making the data-test-ids truly unique, without ejecting? I would prefer not to test on classnames or by exporting the components and importing them into the tests.