Шут и энзим - как проверить функцию, которая является свойством для дочернего компонента (для тестирования покрытия) - PullRequest
Новая
       21

Шут и энзим - как проверить функцию, которая является свойством для дочернего компонента (для тестирования покрытия)

0 голосов
/ 30 января 2019

Чтобы упростить - у меня есть компонент, скажем, <Label />, и я использую его так: 

...
<Label
  labelText="Some text"
  renderText={(text) => {
    const cssClass = text.length < 5 ? 'one-class' : 'other-class';
    return <b className={cssClass}>{text}</b>;
  }}
/>
...

Итак, у меня есть свойство, которое представляет собой функцию, которая определяет, как текст будетотображаться.Все в порядке и работает.

Однако, когда я запускаю jest --coverage - это показывает, что строка с настройкой cssClass не открыта.

Как я могу проверить эту строку?

1 Ответ

0 голосов
/ 30 января 2019

Есть 2 способа проверить это.И вам нужно 2 тестовых случая: один для text.length< 5, а другой для text.length>= 5

При первом приближении используется mount().Здесь вам нужно выяснить, откуда берется аргумент text (передаваемый как props вашему компоненту или каков путь).Тогда вы получите <Label> визуализированный в некотором <span> или чем-то еще.И вам нужно будет проверить, есть ли внутри <b class='one-class'>text</b> или <b class='other-class'>text1</b>

Другой подход заключается в использовании shallow() в вашем компоненте.Тогда вы сможете проверить renderText явно: 

it('renders label with text having length of 4', () => {
  const renderText = shallow(<YourComponent ... >).find(Label).props().renderText;
  expect(renderText('1234')).toEqual(<b className="one-class">1234</b>);
});

it('renders label with text having length of 5 or more', () => {
  const renderText = shallow(<YourComponent ... >).find(Label).props().renderText;
  expect(renderText('12345')).toEqual(<b className="other-class">12345</b>);
});
...