효소가 기본 구성 요소 대신 포장 된 구성 요소를 렌더링합니다.

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 렌더링 방법으로 전환하는 것이 좋습니다.