Question

我一直在玩React和HOC中的单元测试。我有一个更高阶的组件，它返回一个新的WrapperComponent。另外，当返回WrapperComponent时，我也将它与道具和其他HOC连接起来，比如mapStateToProps等。我正在努力的是如何正确渲染由其他HOC组成的HOC。我确定我错过了一些概念。

检查hoc表明它是一个函数，这对HOC来说是有意义的，但当我尝试浅显示hoc时，我收到以下错误：encountered declaration error。

HOC - 为简洁起见删除了一些代码

export default function withComposition(WrappedComponent) {
    class CompositionComponent extends Component {

        static displayName = `withComposition(${WrappedComponent.displayName || WrappedComponent.name})`;

        render() {
            return (
                <WrappedComponent
                    {...this.props}
                />
            );
        }
    }

    const mapStateToProps = state => ({
        isMounted: selectIsMounted(state),
    });

    const enhance = compose(
        connect(mapStateToProps),
        withTranslate,
    );

    return enhance(CompositionComponent);
}

单元测试

import React, { Component } from 'react';
import withComposition from '../modules/withComposition';

describe('CompositionComponent', () => {   
    const hoc = withComposition(<Component />);
    debugger;
    const wrapper = shallow(hoc);
});

我也遇到以下错误，我认为这很奇怪，因为我的其他测试使用shallow方法并且没有引起任何问题。

Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

Answer 1

HOC返回组件，因此shallow应该传递JSX组件：

describe('CompositionComponent', () => {   
    const Hoc = withComposition(<Component />);
    debugger;
    const wrapper = shallow(<Hoc foo="foo" bar="bar" />);
});

React / Jest - 在Jest单元测试中渲染连接的HOC组件

1 个答案: