Reactjs 使用Jest酶测试样式组件

如何测试我的

样式化组件

是否具有特定的CSS属性值对

假设我的组件如下所示：

const myColor = '#111';

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

测试检查

'background-color'

属性是否具有值

'#111'

---

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

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样式的组件”
描述（‘组件’，（）=>{
它（'应该有颜色'，（）=>{
const wrapper=mount（）；
expect（wrapper.find（'Button'））.toHaveStyleRule（'background-color'，myColor）
});
});

如果需要测试具有特殊性hack的组件，比如

const-Button=styled.Button'&&{background color:${myColor}；}

toHaveStyleRule

在这种情况下对我不起作用找到了解决方案：将

modifier:'&&'，

添加到

toHaveStyleRule

方法中对我起作用，比如：

.toHaveStyleRule（'background-color'，myColor，{modifier:'&'）