하위 구성 요소 나누기에 농담 스냅 샷 테스트 곳을 실행할 때 나는 종종 오류 메시지가</p> <p>농담 스냅 샷 시험

Question

알로하, 내부 16 개 구성 요소를 반응한다. React 자체는 다음 경고를 작성하지만 던져진 오류 메시지를 유지합니다.

구성 요소 중 하나에서 오류가 발생했지만 React는 그 내용을 알 수 없습니다. 이것은 브라우저의 flakiness로 인한 것 같습니다. React는 DevTools의 "예외시 일시 중지"동작을 유지하기 위해 최선을 다합니다. DEVTools 전용 트릭을 필요합니다. 브라우저에서 작동하지 않을 수도 있습니다. 프로덕션 모드에서 오류를 트리거하거나 최신 브라우저로 전환하십시오. 이것이 실제로 React의 문제인 것으로 의심되는 경우 문제를 제기하십시오.

그 메시지는 실제로 유용하지 않으며 내가 던진 오류를 전달하는 반응을 일으킬 수있는 특정 환경 변수가 있는지 궁금합니다.

Answer 1

반응 테스트 렌더러를 파헤 치면 내 구성 요소가 오류 경계 내에 배치되지만 여전히 오류가 표시되지만 해당 성가신 메시지는 제거됩니다.

그래서 jsx를 인수로 사용하여 오류 경계로 감싸는 작은 도우미 함수를 만들었습니다.

// testRenderer.jsx 
import * as React from 'react'; 
import * as renderer from 'react-test-renderer'; 

class TestErrorBoundary extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     hasError: false, 
    } 
    } 

    componentDidCatch(error) { 
    this.setState({ 
     hasError: true, 
    }); 

    // let test fail... 
    throw new Error(error); 
    } 

    render() { 
    if (this.state.hasError) { 
     return <div>An error occurred</div>; 
    } 

    return this.props.children; 
    } 
} 

function testRenderer(children) { 
    return renderer.create( 
    <TestErrorBoundary> 
     {children} 
    </TestErrorBoundary> 
).toJSON(); 
} 

export default testRenderer; 

이렇게하면 짜증나는 경고는 없지만 2 개의 새로운 경고가 추가됩니다.