如何测试：onClick 事件 - Jest/ Enzyme

Question

我是单元测试的新手，我刚刚运行了一个测试覆盖率。这是目前唯一缺少的行。

我如何测试这条线并确保 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 和酶

测试文件：

// 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 个道具。

谢谢

Answer 1

这样的事情应该可以工作：

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();
})

注意：您也可以将它们拆分为单独的测试，分别测试每个调用。