Test styled component with Jest-Enzyme

13
votes

How can I test if my styled-component has a specific CSS attribute-value pair?

Let's say my component is the following :

const myColor = '#111';

const Button = styled.button`
  background-color: ${myColor};
`;

And the test checks that the 'background-color' attribute has the value '#111'.

The test runner is Jest and I use the testing utilities library Enzyme.

1
reactjsunit-testingjestjsenzymestyled-components

1 Answers

14
votes

The toHaveStyleRule function of jest-styled-components solved my problem!

import 'jest-styled-components'

describe('<Button> component', () => {
  it('should have myColor', () => {
    const wrapper = mount(<Button />);
    expect(wrapper.find('Button')).toHaveStyleRule('background-color', myColor)
  });
});