мелкие компоненты в стиле рендеринга с css и тестирование снимков - PullRequest
Новая
       17

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

0 голосов
/ 30 апреля 2020

Я использую стилизованные компоненты и компоненты jest + энзим + 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 в снимке?

...