Как проверить эту функцию хуков? - PullRequest
0 голосов
/ 14 марта 2020

У меня есть функция ловушек, как показано ниже

При нажатии на кнопку она установит show в значение true, а timeOut.

import React, { useState, useRef } from 'react';
import { Overlay, Popover } from 'react-bootstrap';
import { CopyToClipboard } from 'react-copy-to-clipboard';
/**
 * ボタンでクリップボードにコピーするコンポーネント
 * @function ButtonCopyToClipboard
 * @param {*} props
 */
function ButtonCopyToClipboard(props) {
  const [show, setShow] = useState(false);
  const [target, setTarget] = useState(null);
  const ref = useRef(null);
  const [timeOut, setTimeOut] = useState(null);

  /**
   * コピーボタン押下時の処理
   * @method
   * @param {*} event
   */
  const handleClick = event => {
    clearTimeout(timeOut);
    setShow(true);
    setTarget(event.target);
    setTimeOut(
      setTimeout(() => {
        setShow(false);
      }, 1000)
    );
  };
  /**
   * @method
   */
  return (
    <div ref={ref}>
      <CopyToClipboard text={props.dataCopy}>
        <button
          type="button"
          style={{ width: '100%', marginBottom: '2px' }}
          className="btn btn-info"
          onClick={handleClick}
        >
          {props.title}
        </button>
      </CopyToClipboard>
      <Overlay
        show={show}
        target={target}
        placement="top"
        container={ref.current}
        containerPadding={20}
      >
        <Popover>
          <Popover.Content>{props.titleTooltip}</Popover.Content>
        </Popover>
      </Overlay>
    </div>
  );
}

export default ButtonCopyToClipboard;

Я использую Jest и Enzyme для проверить функции хуков выше. Во всплывающем окне проверки контрольного примера я смог вызвать событие handleClick:

import React from 'react';
import * as enzyme from 'enzyme';
import { shallow, mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
import Adapter from 'enzyme-adapter-react-16';
import ButtonCopyToClipboard from '../../../src/components/ComponentsSearchResult/ButtonCopyToClipboard';

enzyme.configure({ adapter: new Adapter() });

describe('Test for ImportApiKey Component', () => {
  let props;
  beforeEach(() => {
    props = {
      dataCopy: '',
      title: '',
      titleTooltip: ''
    };
  });

  it('check render with snapshot', () => {
    const wrapper = shallow(<ButtonCopyToClipboard {...props} />);
    expect(toJSON(wrapper)).toMatchSnapshot();
  });
  it('check toggle popup', () => {
    const wrapper = shallow(<ButtonCopyToClipboard {...props} />);
    wrapper.find('button').simulate('click', { target: 'button.btn.btn-info' });
  });
});

Как проверить значения функций handleClick или show или timeOut и props.titleTooltip?

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