Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Test styled component with Jest-Enzyme

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.

like image 444
dmraptis Avatar asked Jan 04 '19 10:01

dmraptis


1 Answers

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)
  });
});
like image 173
dmraptis Avatar answered Oct 15 '22 08:10

dmraptis