Testing styled-components when referencing to other component

Question

I am having an issue trying to test a component made with styled-components.

so i have two components and i am trying to get the second component's background color to change if i hover on the first element.

My components:

const Container = styled.div``

const Label = styled.label`
     ${Container}:hover & {
            background-color: red;
     }
`

Whenever i try to test the label component with jest expect(label).toHaveStyle() it always throws an error that said TypeError: Cannot read property 'parentElement' of null. But when i commented the reference to container component within label the test passes. Can anybody help? Thank you sooo much.

I am using react-testing-library to render my components in my test files.

Please provide more information on how you're rendering the component in your test file. — Mohit

louisandrew louisandrew · Accepted Answer · 2020-06-16T09:34:34

Rewritten the code in a sandbox and everything works just fine 😳. Maybe i made the wrong implementation in my project. Thanks for the help!

sandbox link: https://codesandbox.io/s/nervous-hodgkin-irruc?file=/src/App.js

Testing styled-components when referencing to other component

1 Answers