Regression in Emotion + jest-emotion #1214
Description
emotionversion: 10.0.7reactversion: 16.7.0
Relevant code:
import React from 'react';
import styled from '@emotion/styled/macro';
export const Bar = styled.div`
color: blue;
`;
export const Foo = styled(props => (
<div {...props}>
<Bar />
</div>
))`
color: red;
${Bar} {
color: yellow;
}
`;What you did:
it('child style to be read by toHaveStyleRule', () => {
expect(mount(<Foo />).find(Bar)).toHaveStyleRule('color', 'yellow');
});
What happened:
FAIL src/bug.test.js
✕ child style to be read by toHaveStyleRule (17ms)
● child style to be read by toHaveStyleRule
Expected color to match:
yellow
Received:
blue
Reproduction:
https://github.com/FezVrasta/emotion-jest-regression
run yarn test
Problem description:
This started happening after I upgraded Emotion 10 to the latest patch version, I'm sure it works with:
"@emotion/core": "^10.0.4",
"@emotion/styled": "^10.0.4",
"jest-emotion": "^10.0.2",
Emotion itself actually works, in my repro you can see in the snapshot that the correct class is generated:
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`child style to be read by toHaveStyleRule 1`] = `
.emotion-2 {
color: red;
}
.emotion-2 .emotion-1 {
color: yellow;
}
.emotion-0 {
color: blue;
}
<Foo>
<div
className="emotion-2 emotion-3"
>
<Bar>
<div
className="emotion-0 emotion-1"
/>
</Bar>
</div>
</Foo>
`;
but jest-emotion can't read it for some reason/
Suggested solution:
Not sure.