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

あなたはすでに知っているかもしれませんが、コンポーネント「深い1つのレベルを」レンダリング浅いです。また、私はあなたがHOCの概念に精通していると仮定します（高次コンポーネント）。あなたのMyAutoCompleteはmuiThemeable HOCでラップされています。したがって、浅いレンダリングはmuiThemeableをレンダリングするだけで、MyAutoCompleteのレンダリングメソッドの内部にレンダリングしません。それらは1つ以上のレベルのコンポーネントツリーの深いところにあるからです。

この問題を回避するため、通常はデコレートされていないコンポーネントをテストします。 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