测试材料 UI 选项卡和酶

Question

我在使用 Enzyme 和 Jest 测试 Material UI 选项卡时遇到问题。 问题是模拟点击Tab组件

我已经尝试过材料浅层方法（createShallow）和酶浅层但结果是一样的

我在 Tab 组件上的 console.log 正在返回我的目标元素：

   <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 只是一个代码片段，用于在 HOC 中使用 .dive 递归查找组件 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 来深入了解组件上的 HOC：

import { shallow } from 'enzyme';


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

或

你可以找到这样的元素：

wrapper.find(‘withStyles(Tab)’)

可能需要根据您的用例进行一些调整。但它会帮助你