Как проверить компоненты ForwardRwf с помощью jest / энзима? - PullRequest
0 голосов
/ 05 июня 2019

У меня есть такой компонент:

import React, { Component } from 'react';

export class TopicsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      topics: [...],
    };
    this.references = [];
  }

getOrCreateRef(id) {
  if (!this.references.hasOwnProperty(id)) {
    this.references[id] = React.createRef();
  }
  return this.references[id];
}

  render() {
    const {
     topics
    } = this.state;


    return (       
        <div>
          <ul>
            {topics.map((topic) => (
                <TopicItem
                  key={topic.id}
                  topic={topic}
                  ref={this.getOrCreateRef(topic.id)}
                />
              )
            )}
          </ul>
        </div>

    )
  }
}
    const TopicItem = React.forwardRef((props, ref) => {

      return (
        <li
        >
          <p>{props.name}</p>
          <i
            className="fal fa-plus"
          />
        </li>
      );
    });

Я написал тест, чтобы проверить, сколько элементов li будет отображено:

test('should render 3 li items', () => {
      console.log(wrapper.debug())
      expect(wrapper.find('TopicItem').length).toBe(3);
    });

но мой тест не удался, потому что в шутку они узнали:

          <ul>
            <ForwardRef topic={{...}} />
            <ForwardRef  topic={{...}} />
            <ForwardRef  topic={{...}} />
          </ul>

Как я могу протестировать компоненты, которые возвращаются с React.forwardRef? Я не могу найти подходящих решений в Интернете или здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...