1 Вопрос: Протестируйте тег React с точечной нотацией

вопрос создан в Wed, May 8, 2019 12:00 AM

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

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

Я написал тест в Jest и 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?

    
0
  1. Я не знаком с точечной нотацией. Но я бы попробовал expect(wrap.find("Card).dive().hasClass("green")).toEqual(true)
    2019-05-08 16: 00: 34Z
1 ответ                              1                         

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

import Card from "..."

...

expect(wrap.find(Card.Meta) ... )
    
3
2019-05-08 16: 05: 18Z
источник размещен Вот