在样式化组件的 Jest 测试中查找类名

Posted

技术标签:

【中文标题】在样式化组件的 Jest 测试中查找类名【英文标题】:Finding class name in Jest test in styled-component 【发布时间】:2020-02-29 21:27:21 【问题描述】:

我写了以下测试:

  it('componentDidUpdate should mount and change props', () => 
    const onChange = jest.fn();
    const wrapper = enzyme
      .mount(
        <JsonInput
          onChange=onChange
          onValueChange=mockOnValueChange
          value=exampleJsonStringValidated
        />,
         wrappingComponent: withTestThemeWrapper ,
      );
    console.log(wrapper.debug());
    expect(wrapper.find(JsonInput).hasClass('valid')).toEqual(true);
    wrapper.setProps( value: exampleJsonStringNotValidated );
    expect(wrapper.find(JsonInput).hasClass('invalid')).toBe(true);
  );

console.log 显示:

  <JsonInput onChange=[Function: mockConstructor] onValueChange=[Function: mockConstructor] value=""firstName":"John","lastName":"Doe","age":210">
    <styled.textarea onChange=[Function] value=""firstName":"John","lastName":"Doe","age":210" >
      <StyledComponent onChange=[Function] value=""firstName":"John","lastName":"Doe","age":210"  forwardedComponent=... forwardedRef=...>
        <textarea onChange=[Function] value=""firstName":"John","lastName":"Doe","age":210"  className="sc-bdVaJa lavZWj" />
      </StyledComponent>
    </styled.textarea>
  </JsonInput>

在组件中className="sc-bdVaJa lavZWj"的代码是validinvalid,但是现在我看到没有可读的类名称,如何测试它?

组件(样式化部分)

export const StyledTextArea = styled.textarea< height: string >`
margin: 0;
box-sizing: border-box;
width: 350px;
outline: none;
border: none;
height: $props => props.height;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
background-color: $props => props.theme.palette.foreground;
color: $props => props.theme.palette.text;
cursor: text;

&:focus
  border-bottom: 2px solid $props => props.theme.palette.active;


&:valid
  border-bottom: 2px solid $props => props.theme.palette.positive;


&:invalid
  border-bottom: 2px solid $props => props.theme.palette.negative;

`;

并渲染:

render() 
  // to exclude unknown property 'onValueChange' for JsonInput for DevTools
  const  height = '', onValueChange, ...restProps  = this.props;
  return (
    <StyledTextArea
      ref=this.JsonInputRef
      ...restProps
      onChange=this.handleValueChange
      height=height
    />
  );

【问题讨论】:

还添加一些代码,您的组件如何使用此valid/invalid 【参考方案1】:

所以你不需要(也不能)自己测试类名,因为 :valid:invalid 是状态/伪选择器。

对于来自jest-styled-componentstoHaveStyleRule,有第三个参数options,我们可以在其中提供所需的状态,例如:hover:valid

试试这个:

expect(wrapper
  .find('textarea')
  .toHaveStyleRule(
    'border-color', 
    'border-bottom: 2px solid red',
    modifier: ':invalid'
  )
).toBeTruthy();

【讨论】:

以上是关于在样式化组件的 Jest 测试中查找类名的主要内容,如果未能解决你的问题,请参考以下文章

无法让 Jest 使用包含主题的样式化组件

我应该如何为样式化组件编写 Jest 测试用例并监视 css 以验证样式是不是正确?

样式化的组件添加组件名称作为类名

Jest 无法渲染和测试 goober 样式的组件

如何使用 Jest 和 Enzyme 测试样式组件以具有属性

如何使用 Jest 和/或 Enzyme 测试由 React 组件呈现的样式和媒体查询