Как проверить конкретное значение css-свойства React-элемента? - PullRequest
0 голосов
/ 11 февраля 2019

Я хочу проверить конкретное значение css-свойства с помощью фермента.Для оформления компонентов - использовался помощник emotion css.

Давайте предположим, что следующий случай:

it('title has font-size 20px', () => {
  const titleCss = css`
    font-size: 20px;
  `;

  const mountedTitle = mountWithTheme(<h1 className={titleCss}>Title</h1>);

  expect(mountedTitle).toHaveStyleRule('font-size', '20px');
});

Здесь:

  • mountWithTheme - это просто оболочка дляметод рендеринга фермента, но позволяет передать тему;

  • toHaveStyleRule - это jest-emotion matcher.

То, что не 'т, я получил

Свойство не найдено: font-size

Если вы посмотрите на шутливые эмоции пример , вы увидите, что стильЗдесь используется обертка, поэтому создан компонент обертки, но это не относится к хелеру 'css'.

Я также думал об использовании энзимного помощника рендеринга для создания реального HTML, но кажется, что оболочка Cheerio также не имеет доступа к значениям CSS.

...