2017-12-15 17 views
3

React 파편이 Enzyme의 스냅 샷과 호환되는지 궁금합니다. 지금은 React 16+의 단편이 효소의 shallow() 방법에서 Symbol으로 렌더링되는 것 같아서 변환 오류가 발생합니다 : "TypeError: Cannot convert a Symbol value to a string". 여기 React fragment에서 Enzyme의 스냅 샷을 사용할 수 있습니까?

내 테스트입니다 :

it('should render successfully',() => { 
    const wrapper = shallow(
    <Sections 
     data={mappedMockData} 
     sections={mappedMockData.sections} 
     eligibility={mockEligibility} 
    /> 
); 

console.log(wrapper.debug()); 

expect(wrapper).toMatchSnapshot(); 

그리고 여기 내 CONSOLE.LOG의 출력입니다 :

지적
<Symbol(react.fragment)> 
    <div className="content-container"> 
     <div className="flex"> 
     <div className="sections-wrap"> 
      <Connect(Section1) /> 
      <Connect(Section2) /> 
     </div> 
     <Connect(Section3) /> 
     </div> 
    </div> 
    <div className="content-container"> 
     <Connect(Section4) /> 
     <Connect(Section5) /> 
    </div> 
    </Symbol(react.fragment)> 

가치 : 나는 이미 내 효소를 업데이트 반작용하고, 이미 사용하고 한 어댑터, 효소의 migration guide에서 제안했다. 스택 오버플로 또는 Github에서 다른 유사한 문제를 찾을 수 없었습니다. 모든 통찰력에 미리 감사드립니다!

답변

1

enzyme issue comment은 유효한 테스트에 유용했습니다. (. 전체 스레드는 효소 스냅 샷 테스트와 조각의 상태에 대한 자세한 내용을 알고하는 데 유용합니다)하지만이 코드는 <React.Fragment>의 위치에 스냅 샷의 템플릿에 <Unknown></Unknown> 문자를 나를 위해 일한, 출력 :

여기
const component = shallow(<FragmentComponent />) 
const fragment = component.instance().render() 
expect(shallow(<div>{fragment}</div>).getElement()).toMatchSnapshot() 

입니다 샘플 출력 :

exports[`<FragmentComponent /> it renders to match the snapshot 1`] = ` 
<div> 
    <Unknown> 
    <div></div> 
    <div></div> 
    </Unknown> 
</div> 
`; 
+0

감사합니다. 이 작업은, (겉으로보기에) 쉬운 문제에 대한 더 깔끔한 해결책이 있었으면 좋겠습니다. / –