menu

styled-components

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

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
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 6 months 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