使用 Jest-Enzyme 测试样式组件

Posted 2023-02-22

【中文标题】使用 Jest-Enzyme 测试样式组件

【英文标题】：Test styled component with Jest-Enzyme

【发布时间】：2019-05-30 21:56:23

【问题描述】：

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

假设我的组件如下：

const myColor = '#111';

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

并且测试检查'background-color' 属性的值是否为'#111'。

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

【参考方案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)
  );
);

【讨论】：

如果需要测试具有特异性 hack 的组件怎么办，比如 const Button = styled.button' && background-color: $myColor; '; toHaveStyleRule 在这种情况下对我不起作用

找到解决方案：将modifier: '&&', 添加到toHaveStyleRule 方法对我有用，就像这样：.toHaveStyleRule('background-color', myColor, modifier: '&&' );