javascript - 如何测试:onClick 事件 - Jest/ Enzyeme
问题描述
我是单元测试的新手,我刚刚运行了一个测试覆盖率。这是目前唯一缺少的行。
我如何测试这条线并确保 100% 被覆盖
export default class Normalize extends Component {
constructor(props) {
super(props)
this.state = {}
// this.handleChange = this.handleChange.bind(this)
}
componentDidMount() {
this.props.normalizeData(null)
}
render () {
return (
<div id='normalize-container'>
<div id='normalize-header'>
</div>
<br /><br />
<h3 className='normalized-header'>{this.props.newResponse ? 'Raw Data' : 'Normalized Data'}</h3><br/>
<div>
{this.props.newResponse ? null :
this.props.THead ?
<div>
{!this.props.datasourceCatalog ?
<div id='next-button-modal'>
{/*<button title='Proceed To Shape' className='request-button' id='next-btn-ready-modal' onClick={this.props.nextTab}><img src={nextImg}/></button>*/}
<button title='Proceed To Shape' className='request-button' id='next-btn-ready-modal' onClick={(e) => {this.props.toggleModal(); this.props.nextTab();}}>
<FontAwesome
className='fa-angle-right'
name='view-externallink-img'
size='2x'/>
</button>
<h4>Proceed To Shape</h4>
</div> :
null}
<div className='normalize-table-container'>
<div className="data-table-wrapper">
<table>
<thead dangerouslySetInnerHTML={{__html: this.props.THead}} />
<tbody dangerouslySetInnerHTML={{__html: this.props.TBody}} />
</table>
</div>
</div>
</div>
: null
}
</div>
</div>
使用 React JS - 玩笑和酶
测试文件:
// jest mock functions (mocks this.props.func)
const normalizeData = jest.fn();
const toggleModal = jest.fn();
const nextTab = jest.fn();
const onClick = jest.fn();
// defining this.props
const baseProps = {
normalizeData,
newResponse:{},
THead:{},
TBody:{},
datasourceCatalog:{},
toggleModal,
nextTab,
onClick,
describe(' Normalize Test', () => {
let wrapper;
let tree;
beforeEach(() => wrapper = shallow(<Normalize {...baseProps} />));
it(' Should render with all of the props', () => {
使用所有道具进行渲染 - 但只需要确定如何测试上面的行,点击 2 个道具。
谢谢
解决方案
像这样的东西应该工作:
it('should call toggleModal and nextTab functions on button click', () => {
// Reset info from possible previous calls of these mock functions:
baseProps.toggleModal.mockClear();
baseProps.nextTab.mockClear();
// Remove props that would end up hiding the button
wrapper.setProps({
newResponse: null,
datasourceCatalog: null
});
// Find the button and call the onClick handler
wrapper.find('#next-btn-ready-modal').simulate('click');
// Test to make sure prop functions were called via simulating the button click
expect(baseProps.toggleModal).toHaveBeenCalled();
expect(baseProps.nextTab).toHaveBeenCalled();
})
注意:您也可以将它们拆分为单独的测试,分别测试每个调用。
推荐阅读
- javascript - 即使在页面刷新后如何只计算一次点击 - Javascript
- python - 如何使用 Selenium 在 span 标签中输入数据?
- woocommerce - 订单完成后向特定地址发送电子邮件
- codeigniter - 当我将我的网站上传到 cpanel 一个 codeigniter 项目时出现此错误
- java - 字符串连接后代码显示十六进制值而不是字符串
- android - Jetpack Compose 手机屏幕布局预览
- vue.js - NuxtJS - 如果 webpack 哈希,我如何指定块文件名?
- django - 无法使用 caddy + django + gunicorn 提供静态文件
- python - 如何检测安装包的要求
- php - 迁移后基本站点缺失元素