Enzyme Shallow를 사용하여 하위 구성 요소로 전달 된 소품을 테스트하려면 어떻게해야합니까?

Question

Material-UI 자동 완성을 얇게 감싸는 구성 요소를 테스트하는 데 문제가 있습니다. 내 테스트에서, 나는 전달되는 소품을보고 싶지만 내 콘솔 진술은 빈 개체입니다. 나는 이것을 렌더링하기 위해 효소의 얕은 방법을 사용하고 있습니다.

const underlineFocusStyle = { 
    display: 'block', 
    height: '100%', 
    outline: 'none', 
    position: 'relative', 
    padding: '0px', 
    width: '100%', 
    border: 'none', 
    backgroundColor: 'rgba(0, 0, 0, 0)', 
    cursor: 'inherit', 
    opacity: '1' 
}; 

export class MyAutoComplete extends React.Component { 
    render() { 
     let { muiTheme, forceOpenOnFocus, ...propsToApply } = this.props; 
     propsToApply.underlineFocusStyle = underlineFocusStyle; 

     if (forceOpenOnFocus) { 
      if (!propsToApply.filter) { 
       propsToApply.filter = ((searchText, key) => { 
        return searchText === '' || AutoComplete.defaultProps.filter(searchText, key); 
       }); 
      } 
     } 
     return <AutoComplete name={'autocomplete'} {...propsToApply} />; 
    } 
} 

MyAutoComplete .propTypes = { 
    muiTheme: PropTypes.object, 
    forceOpenOnFocus: PropTypes.bool 
} 

export default muiThemeable()(MyAutoComplete); 

그리고 내 테스트 : 여기 내 코드의 당신은 이미 아시다시피

describe('LLamasoftAutoComplete',() => { 
    const muiTheme = getMuiTheme(); 
    const shallowWithContext = (node) => shallow(node, {context: {muiTheme}}); 

    it('should pass in ',() => { 
     const wrapper = shallowWithContext(
      <LLamasoftAutoComplete 
       muiTheme={muiTheme} 
       forceOpenOnFocus={true} 
       dataSource={['One', 'Two', 'Three']} /> 
     ); 

     console.log(wrapper.find('AutoComplete').props()); // is {} 

     expect(true).toBe(false); 
    }); 
}); 

Answer 1

, 구성 요소 "한 단계 깊이"를 렌더링 얕은. 또한 HOC의 개념에 익숙하다고 가정합니다 (고차원 구성 요소). MyAutoComplete이 muiThemeable HOC로 포장되어 있습니다. 따라서 얕은 렌더링은 muiThemeable 만 렌더링하고 MyAutoComplete의 렌더링 메서드 내에서 렌더링 한 것은 렌더링하지 않습니다. 그것들은 컴포넌트 트리에서 한 레벨 이상 깊숙이 있기 때문입니다.

이 문제를 방지하기 위해 일반적으로 장식되지 않은 구성 요소를 테스트합니다. HOC로 랩핑하기 전의 원래 구성 요소. 따라서 파일에서 데코 레이팅되지 않은 구성 요소와 장식되지 않은 구성 요소를 모두 내 보내야합니다.이 중 하나를 기본 내보내기로 지정하고 데코 레이팅하지 않은 구성 요소는 명명 된 내보내기로 지정해야합니다.

export default muiThemeable()(MyAutoComplete); 
export { MyAutoComplete }; 

이제는 장식용이 아닌 것을 가져 와서 테스트 할 수 있습니다. 컨텍스트에 의존하는 구성 요소에 더 이상 muiThemeable이 없으므로 실제로 컨텍스트로 렌더링 할 필요는 없습니다. 그래서 당신의 시험은 더 간단 해집니다. 추가 정보를 원하시면이 질문에

import { MyAutoComplete as LLamasoftAutoComplete} from './your/file/location' 

describe('LLamasoftAutoComplete',() => { 
    const muiTheme = getMuiTheme(); 

    it('should pass in ',() => { 
     const wrapper = shallowWithContext(
      <LLamasoftAutoComplete 
       muiTheme={muiTheme} 
       forceOpenOnFocus={true} 
       dataSource={['One', 'Two', 'Three']} /> 
     ); 

     console.log(wrapper.find('AutoComplete').props()); 

     expect(true).toBe(false); 
    }); 
}); 

읽기 답변 : How to test decorated React component with shallow rendering