Протестируйте тег React с точечной нотацией - PullRequest
Новая
       18

Протестируйте тег React с точечной нотацией

0 голосов
/ 08 мая 2019

У меня есть этот простой компонент реагирования, который использует теги Semantic UI: 

  render() {
    return (
      <Card.Meta ref="CardStatusComponent123" className={'float small ' + this.props.align + this.props.statusClassName}>
        {this.props.statusText}
      </Card.Meta>
    );
  }

Я написал тест в Jest and Enzyme для тестирования компонента: 

describe('CardStatusComponent', () => {
  it('displays prop text', () => {
    const props = {
      statusText: 'Available',
      statusClassName: ' green ',
      align: 'left',
    };
    const wrap = shallow(<CardStatusComponent {...props} />);
    expect(wrap.find("Card.Meta").at(0).hasClass('green')).toEqual(true)
  });
});

Ошибка, которую я получаю при запуске jest:

Метод hasClass предназначен для запуска на 1 узле. Вместо этого найдено 0.

Я точно знаю, что это потому, что имя тега отделено точкой, потому что, если я заменю тег тегом div, он будет работать. Я пытался получить доступ только к "Карте" и "Мета" по отдельности, и я ничего не могу найти в Google.

Может кто-нибудь объяснить мне, как проверить тег с точечной нотацией в Jest и Enzyme?

1 Ответ

3 голосов
/ 08 мая 2019

Делая wrap.find("Card.Meta"), вы пытаетесь найти по displayName, который не является "Card.Meta".
Сделайте это вместо: 

import Card from "..."

...

expect(wrap.find(Card.Meta) ... )
...