javascript 如何测试：onClick 事件 - Jest/Enzyeme
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54607307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to test: onClick event - Jest/ Enzyeme
提问by user 9191
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
谢谢
采纳答案by Matty J
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.
注意：您也可以将它们拆分为单独的测试，分别测试每个调用。
