酵素がベース成分ではなく包まれた成分をレンダリングする

Question

私はJestとEnzymeで私のReactアプリをスナップショットテストしています。高次コンポーネントでラップされていないテスト可能なバージョンのコンポーネントをエクスポートしようとしています。

ラップされたコンポーネントを、私のアプリが使用できるように、またテスト可能なバージョン、つまりラップされていないバージョンのコンポーネントにエクスポートします。上記のようになりますスナップショットを生成

NavBar.jsx

const NavBar = ({props}) => {(
    <div>...</div> 
)} 

export { NavBar as TestableNavBar }; 

export default withStyles(styles)(NavBar); 

NavBar.test.js

import React from 'react'; 
import { shallow } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 
import { TestableNavBar } from './NavBar'; 

const props = { 
    ... 
}; 

describe('Navbar',() => { 
    it('should render correctly',() => { 
    const wrapper = shallow(<TestableNavBar {...props} />); 
    const tree = toJson(wrapper); 
    expect(tree).toMatchSnapshot(); 
    }); 
}); 

：

この

は私のコンポーネントである

<div> 
    <withStyles(AppBar) 
    className="" 
    > 
    <withStyles(Toolbar) 
     disableGutters={true} 
    > 
     <withStyles(IconButton) 
     aria-label="open drawer" 
     className="" 
     color="contrast" 
     onClick={[Function]} 
     > 
     ... 
</div> 

まだHOCをレンダリングしようとしている理由を理解できませんか？

Answer 1

Enzyme's shallow方法はただで宣言した子どもたちは法（AppBar、Toolbarなど）をレンダリングレンダリング、および出力は、それらが同じwithStyles HOCによって包まれていることを示しています。

ルートコンポーネントのテスト可能なバージョンをエクスポートすると、実際の出力（div）を実際にテストできますが、子コンポーネントがwithStyles HOCでラップされることはありません。

コンポーネントの最終出力をテストする場合は、Enzyme's mountレンダリング方法に切り替えることを検討してください。