Испытайте стилизованный компонент с Jest-Enzyme

Question

Как я могу проверить, имеет ли styled-component определенную пару атрибут-значение CSS?

Допустим, мой компонент следующий:

const myColor = '#111';

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

И тест проверяет, что атрибут 'background-color' имеет значение '#111'.

Тестовый бегун - Jest , и я использую библиотеку утилит тестирования Фермент .

Answer 1

Функция toHaveStyleRule jest-styled-elements решила мою проблему!

import 'jest-styled-components'

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