I'm trying to test the default & changed background based on the passed prop active, however, jest-emotion claims to not be able to find the property background on the styled component. I've tried making it more specific (background-color & background-image), but neither work.
Styled component:
const StyledButtonToolbar = styledWithTheme(ButtonToolbar)<StylingProps>`
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
right: 26px;
padding-left: 30px;
background: linear-gradient(to right, transparent, ${(props: any) =>
props.active === "true" ? props.theme.colors.highlight : "white"});
`;
Default state expect called:
expect(wrapper.find(ButtonToolbar)).toHaveStyleRule(
"background",
"linear-gradient(to right, transparent, white)",
);
Error:
Property not found: background
38 | </Provider>,
39 | );
> 40 | expect(wrapper.find(ButtonToolbar)).toHaveStyleRule(
| ^
41 | "background-image",
42 | `linear-gradient(to right, transparent, ${props => props.theme.colors.highlight})`,
43 | );
Turns out they were still building support and it works now