React/Jest - Jestユニットテストで接続されたHOCコンポーネントをレンダリングする

Question

ReactとHOCでユニットテストを行ってきました。私は、新しいWrapperComponentを返す上位コンポーネントを持っています。また、WrapperComponentを返す際には、mapStateToPropsなどの小道具や他のHOCにも接続しています。他のHOCで構成されているHOCを適切にレンダリングする方法は苦労しています。私はいくつかの概念が欠けていると確信しています。

hocを調べると、それはHOC'sには意味があるが、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戻っコンポーネント、あなたはJSXコンポーネントを渡す必要がありshallowのよう：

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