React/Jest - Jest 유닛 테스트에서 연결된 HOC 구성 요소를 렌더링하십시오.

Question

React와 HOC에서 유닛 테스트를 해보았습니다. 새로운 WrapperComponent를 반환하는 상위 구성 요소가 있습니다. 또한 WrapperComponent를 반환 할 때 mapStateToProps 등과 같은 소품 및 HOC와도 연결됩니다. 다른 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 반환 구성 요소, 당신은 JSX 구성 요소를 통과해야 shallow에 있도록 :

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