我具有如下的钩子函数
点击按钮时,会将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
?