Question

如何测试我的styled-component是否具有特定的CSS属性-值对？

假设我的组件如下：

const myColor = '#111';

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

然后测试检查'background-color'属性的值为'#111'。

测试运行程序是 Jest ，我使用的是测试实用程序库酶。

Answer 1

jest-styled-components的toHaveStyleRule功能解决了我的问题！

import 'jest-styled-components'

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

用Jest-Enzyme测试样式化的组件

1 个答案: