Jest / Enzyme Как я могу проверить эту функцию класса компонента React onClick ()? - PullRequest
0 голосов
/ 20 апреля 2020

Я надеюсь, что кто-то может мне помочь. Я застрял в этом весь день.

Вот класс родительского компонента, который я использую:


export class DetailsPage extends Component {

  state = {
    showPopup: false,
  };

  popupHTML = () => {
    const divStyle = {
      position: 'absolute',
      top: this.state.top,
      left: this.state.left,
    };

    const tether = {
      attachment: 'bottom center',
      targetAttachment: 'top center',
    };

    return (
      <div className="popup-wrapper" style={divStyle}>
        <Popup isOpen showArrow tetherProps={tether}>
          <span />
          <div className="popup-text">Copied</div>
        </Popup>
      </div>
    );
  };

  showPopup = id => {
    const el = document.querySelector(`.${id}`);
    if (el) {
      const elTop = el.getBoundingClientRect().top;
      const elLeft = el.getBoundingClientRect().left;
      this.setState({
        showPopup: true,
        top: elTop - 10,
        left: elLeft + 100,
      });
    }
  };

  handleCopyIdToClipboard = () => this.handleCopyToClipboard('myClassName');

  handleCopyToClipboard = id => {
    const selBox = document.createElement('textarea');
    selBox.value = document.querySelector(`.${id}`).textContent;
    selBox.setAttribute('readonly', '');
    selBox.style.position = 'absolute';
    selBox.style.left = '-9999px';
    document.body.appendChild(selBox);
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
    this.showPopup();
  };

  render = () => (
      <div className="details-container">
        (
          <Details
            onCopyId={this.handleCopyIdToClipboard}
          />
        )
        {this.state.showPopup && this.popupHTML()}
      </div>
  );
}

У меня есть другой дочерний класс с именем Details, который является функциональным компонентом без сохранения состояния, и я передаю функцию в качестве опоры, которая служит для копирования текста имени класса.

Я попытался проверить это в Jest, используя следующее:

  it('should invoke handleCopyIdToClipboard', () => {

    // this builds a shallow component for testing
    const wrapper = buildComponent(DetailsPage, props);

    const copyMock = jest.fn();
    wrapper.instance().handleCopyToClipboard = copyMock;

    wrapper.instance().handleCopyIdToClipboard();

    expect(copyMock).toHaveBeenCalledWith({"id"});

Несмотря на то, что тест пройден, он не покрывается покрытием тестовой линии Jest. Извините, я новичок в шутке ... как я могу проверить эту функцию?

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