reactjs - 使用 Jest-Enzyme 测试样式组件

Question

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

假设我的组件如下:

const myColor = '#111';

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

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

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

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