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)’)

根据您的用例，可能需要一些调整。但这对您有帮助

测试材料UI标签和酶

1 个答案: