menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Team

Seeing duplicate elements logged in tests when using Enzyme's mount

July 26, 2020 at 7:08pm

Seeing duplicate elements logged in tests when using Enzyme's mount

July 26, 2020 at 7:08pm (Edited 2 years ago)
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. This is the output when logging 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>
I can't tell if this is a CRA, babel-plugin-macros, or styled-components issue. I should note that the output in the React DevTools is as expected (displayName: true, fileName: true), and that this only affects the tests. Am I missing some configuration, or is this expected?
Current packages:
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1",
"enzyme": "^3.11.0"
No messages yet