作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个组件,它只呈现客户输入的 HTML。此 HTML 可以包含链接。点击事件被拦截。我如何在 enzyme 中测试这个?
class Html extends React.Component {
componentDidMount() {
this.htmlContainer.addEventListener('click', this.handleTap, true);
}
componentWillUnmount() {
this.htmlContainer.removeEventListener('click', this.handleTap, true);
}
handleTap = (event) => {
// do stuff ...
}
render() {
return (
<div
dangerouslySetInnerHTML={{ __html: this.props.html }}
ref={(domElm) => { this.htmlContainer = domElm; }}
/>
);
}
}
最佳答案
我能够通过将安装附加到 DOM 来解决它。
// The Component
function CustomHtml({ html, trackInteraction }) {
const ref = useRef<?HTMLDivElement>();
const trackClick = useCallback(() => {
trackInteraction();
}, [trackInteraction]);
useEffect(() => {
const elements = ref.current?.querySelectorAll('[data-click-track]') || [];
elements.forEach(element => {
element.addEventListener('click', trackClick);
});
return () => {
elements.forEach(element => {
element.removeEventListener('click', trackClick);
});
};
}, [trackClick]);
return <div ref={ref} dangerouslySetInnerHTML={{ __html: html }} />;
}
// The Test
it('should call mock on click on inner html', () => {
const trackInteractionMock = jest.fn();
const body = document.querySelector('body');
body.appendChild(document.createElement('div'));
const wrapper = mount(
<CustomHtml html="<span data-click-track>click me</span>" trackInteraction={trackInteractionMock} />,
{ attachTo: body.firstChild }
);
const span = document.querySelector('[data-click-track]');
const event = new Event('click');
span.dispatchEvent(event);
expect(trackInteractionMock).toHaveBeenCalledWith();
});
关于reactjs - 如何在 React 组件的 risklySetInnerHTML 内容中使用 enzyme 测试点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45073518/
我是一名优秀的程序员,十分优秀!