Тестовый материал UI Tabs и Enzyme

Question

У меня проблемы с тестированием вкладок пользовательского интерфейса материала с помощью Enzyme и Jest. Проблема заключается в симуляции нажатия на вкладку компонента

Я уже пробовал с мелким методом материала (createShallow) и мелким ферментом, но результаты те же

Мой console.log в компоненте Tab возвращает мой целевой элемент:

   <WithStyles(Tab) label="Tab one" />

Вот мой код:

const setup = (newProps) => {
  const props = {
    selected: 0,
    changeTab: jest.fn(),
    ...newProps
  }

  const wrapper = shallowUntilTarget(<DashboardTabs { ...props } />, Base)

  return {
    props,
    wrapper
  }
}

shallowUntilTarget - это всего лишь фрагмент кода для рекурсивного поиска компонента с помощью .dive в HOC. https://github.com/airbnb/enzyme/issues/539

it('Should call the onChange function', () => {
    const { wrapper, props } = setup()
    const tab = wrapper.find({ label: 'Tab One' })
    tab.simulate('click')
    wrapper.update()
    console.log(wrapper.debug()) // I should see a differente content after click in this tab 

    expect(props.changeTab.mock.calls.length).toBe(1) // the mock function call return 0 on the length
  })

И ничего не происходит: (

Answer 1

Вам необходимо использовать WrappedComponent, чтобы погрузиться в HOCs на компонентах:

import { shallow } from 'enzyme';


wrapper = shallow(<DashboardTabs .WrappedComponent {...props} />).dive();

или

Вы можете найти такой элемент:

wrapper.find(‘withStyles(Tab)’)

Может быть, это требует небольших настроек в зависимости от вашего варианта использования. Но это поможет вам