Search code examples
reactjsjestjsenzymeemotion

Background property not found in Jest-emotion's tohaveStyleRule


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 |         );

Solution

  • Turns out they were still building support and it works now