Не удалось смоделировать событие изменения в компоненте React с использованием Material UI HOC

Question

Я не могу смоделировать и наблюдать клики на Material UI HOC. По какой-то причине передача свойства onChange, похоже, не приводит к вызову связанного обработчика события handleChange.

Мой код выглядит следующим образом:

import React from 'react';
import { mount } from 'enzyme';
import App from '../App/App';
import Tabs from '@material-ui/core/Tabs';
import { createShallow } from '@material-ui/core/test-utils';
import { createMount } from '@material-ui/core/test-utils';
import { expect } from 'chai';
import { stub } from 'sinon';


describe('App', () => {
  let wrapper;
  let shallow;
  beforeEach(() => {
    wrapper = mount(<App />);
    shallow = createShallow();
    mount2 = createMount();
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('should call onChange prop with input value 1', () => {

    const handleChange = stub();
    let wrapper2 = shallow(<App handleChange={handleChange} />);
    wrapper2.find(Tabs).prop('onChange')({
      target: { value: '1' } 
    });
    expect(wrapper2.html()).to.exist;
    console.log(wrapper2.debug())
    expect(handleChange.callCount).to.be.equal(1);

  });

});

При просмотре результатов моего теста я получаю следующую информацию:

 FAIL  src/components/__tests__/App.spec.js
  ● App › should call onChange prop with input value 1

    AssertionError: expected 0 to equal 1

      at Object.it (src/components/__tests__/App.spec.js:32:53)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  App
    ✕ should call onChange prop with input value 1 (84ms)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.411s
Ran all test suites related to changed files.

  console.log src/components/__tests__/App.spec.js:31
    <div>
      <WithStyles(Paper) square={true}>
        <WithStyles(Tabs) className="theTabsClassname" value={[undefined]} indicatorColor="primary" textColor="primary" onChange={[Function: bound ]}>
          <WithStyles(Tab) className="tab1" label="Sales Analysis" icon={{...}} />
          <WithStyles(Tab) className="tab2" label="AOV Analysis" icon={{...}} />
          <WithStyles(Tab) className="tab3" label="Access Analysis" icon={{...}} />
        </WithStyles(Tabs)>
        <WithStyles(DatePickers) onDateSelect={[Function: bound setCurrentDate]} />
      </WithStyles(Paper)>
    </div>

Answer 1

Используйте WrappedComponent для доступа к HOC-оболочке и dive() для вложенного html. Должно работать

 shallow(<App.WrappedComponent handleChange={handleChange} />).dive();

Либо вы можете получить доступ к вкладкам, как wrapper.find('WithStyles(Taps)')