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

Answer 2

这是我编写样式组件测试用例来测试CSS的方法，它可能会有所帮助并且易于编写

import renderer from "react-test-renderer";

describe("Styled Components", () => {
  it("<Button  /> should have the correct styles", () => {
    const component = renderer.create(<Button />).toJSON();
    expect(component).toHaveStyleRule("background-color", myColor);
  });
});

谢谢你