Как проверить: событие onClick - Jest / Enzyeme

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

Примечание: вы также можете разделить их на отдельные тесты, по одному для проверки каждого вызова отдельно.