мелкие компоненты в стиле рендеринга с 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 в снимке?