мелкие компоненты в стиле рендеринга с CSS и тестированием снимков

Я использую стилизованные компоненты и компоненты в стиле jest+ ferme+jest-styled для тестирования своих компонентов. Я хочу иметь возможность неглубоко отрисовывать компоненты и использовать тестирование снимков:

  const wrapper = shallow(<MyStyledComponent someProp>ASDF</MyStyledComponent>);
  expect(wrapper).toMatchSnapshot();

Результирующий снимок:

// Jest Snapshot v1

exports[`default 1`] = `
<ComponentStyles__MyStyledComponent>
  <ComponentStyles_Bla>
    ASDF
  </ComponentStyles_Bla>
</ComponentStyles__MyStyledComponent>

Проблема в том, что в комплект не входит укладка. Я пытаюсь достичь того, чтобы мои снимки включали фактический CSS стилизованного компонента. Использование ферментовmount Я смог хорошо увидеть css на снимке:

exports[`style2 1`] = `
.c0 {
  padding: 12px 16px;
  z-index: 1;
  font-size: 16px;
}

<div
  className="c0"
>
  ...
</div>
`;

Но для меня важно рендерить только мелкую, а когда я используюshallow Я вижу только компонент без CSS (как указано выше).

Также пробовал с ферментом diveметод безуспешно. Итак, есть ли способ неглубоко отрендерить стилизованный компонент и получить CSS в снимке?

0 ответов

Другие вопросы по тегам