用酶测试重组的 HOC

Question

我如何测试（使用 jest+enzyme）以下使用 recompose 创建 HoC 的代码：

import {compose, withState, withHandlers} from 'recompose'

const addCounting = compose(
  withState('counter', 'setCounter', 0),
  withHandlers({
    increment: ({ setCounter }) => () => setCounter(n => n + 1),
    decrement: ({ setCounter }) => () =>  setCounter(n => n - 1),
    reset: ({ setCounter }) => () => setCounter(0)
  })
)

执行浅渲染时，我可以访问 counter 和 setCounter 属性，如下所示：

import {shallow} from 'enzyme'

const WithCounting = addCounting(EmptyComponent)
const wrapper = shallow(<WithCounting />)

wrapper.props().setCounter(1)
expect(wrapper.props().counter).toEqual(1)

最大的问题是，如何访问处理程序（increment、decrement 和 reset）并调用它们？它们没有出现在 wrapper.props()

Answer 1

因此您可以先找到实例来访问道具：

const EmptyComponent = () => null;
const WithCounting = addCounting(props => <EmptyComponent {...props} />);
const wrapper = mount(<WithCounting />);

wrapper.find(EmptyComponent).props().setCounter(1);
expect(wrapper.find(EmptyComponent).props().counter).toEqual(1);

用酶测试重组的 HOC

Testing recompose's HOC with enzyme

javascript

reactjs

jestjs

enzyme

recompose