Поиск имени класса в тесте Jest в styled-компоненте - PullRequest
Новая
       65

Поиск имени класса в тесте Jest в styled-компоненте

0 голосов
/ 04 ноября 2019

Я написал следующий тест: 

  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}" height="">
      <StyledComponent onChange={[Function]} value="{"firstName":"John","lastName":"Doe","age":210}" height="" forwardedComponent={{...}} forwardedRef={{...}}>
        <textarea onChange={[Function]} value="{"firstName":"John","lastName":"Doe","age":210}" height="" className="sc-bdVaJa lavZWj" />
      </StyledComponent>
    </styled.textarea>
  </JsonInput>

В компоненте код className="sc-bdVaJa lavZWj" равен valid и invalid, нотеперь я вижу, что нет читаемых имен классов, как это проверить?

Компонент (стилизованная часть) 

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

1 Ответ

0 голосов
/ 04 ноября 2019

Таким образом, вам не нужно (и нельзя) проверять сами имена классов, поскольку :valid и :invalid являются состояниями / псевдоселекторами.

Для toHaveStyleRule с jest-styled-components там3-й аргумент options, где мы можем указать желаемое состояние, например :hover или :valid.

Попробуйте это: 

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