[英]How to test: onClick event - Jest/ Enzyeme
I am new to unit testing and I just ran a test coverage.我是单元测试的新手,我刚刚运行了一个测试覆盖率。 This is the only line missing at the moment.这是目前唯一缺少的行。
How could I test this line and make sure 100 % is covered我如何测试这条线并确保 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>
Using React JS - jest and enzyme使用 React JS - 玩笑和酶
Testing file :测试文件:
// 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', () => {
Render with all props are working - but just need to make sure how to test the line above, on click with 2 props.渲染所有道具都在工作 - 但只需要确保如何测试上面的行,点击 2 个道具。
Thank you谢谢
Something like this should work:这样的事情应该工作:
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();
})
Note: you can also split these into separate tests, one to test each call separately.注意:您也可以将这些拆分为单独的测试,分别测试每个调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.