Я надеюсь, что кто-то может мне помочь. Я застрял в этом весь день.
Вот класс родительского компонента, который я использую:
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. Извините, я новичок в шутке ... как я могу проверить эту функцию?