React: TestUtils.renderIntoDocument는 유효한 기능 구성 요소가 전달되면 'null'을 반환합니다.

에 만든 2019년 04월 10일 · 4코멘트 · 출처: facebook/react

기능 을 요청하거나 버그를보고 하시겠습니까?
버그를보고하고 싶습니다.

현재 행동은 무엇입니까?
현재 유효한 기능 구성 요소가 TestUtils.renderIntoDocument에 전달되면 null을 반환하고 오류가 발생하지 않습니다.

데모
이 동작은 샌드 박스에서 재현되었습니다 : https://codesandbox.io/s/1zpvll4j24

준비된 샘플 구성 요소의 TestUtils.renderIntoDocument 출력을 보려면 콘솔을 확인하십시오.

해결 방법
SFC와 FC를 모두 충족하는 해결 방법은 구성 요소를 컨테이너로 래핑하는 것입니다.

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

예상되는 동작은 무엇입니까?

기능적 구성 요소를 렌더링합니다.
최악의 경우-오류를 제공합니다.

이 문제의 영향을받는 React 버전은 무엇입니까?
React 버전 : 16.8.6

Test Utils Question

출처

DeividasBakanas

모든 4 댓글

기능적 구성 요소에는 instances 가 없으므로 무엇을 기대할 수 있습니까?

TestUtils.renderIntoDocument(<FCCounter/>)

돌려 주다?

또한, 당신이하려는 일을 광범위하게 설명 할 수 있습니까? forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle)을 사용하여 내부 '메소드'에 액세스 할 수 있지만, 제가 궁금합니다. 당신은 전혀 테스트하려고합니다.

threepointone 에 2019년 04월 11일

클래식 구성 요소로 TestUtils.renderIntoDocument 를 호출 한 후 state , props 에 도달하고 setState 사용하여 구성 요소를 조작 할 수 있습니다. 그래서, TestUtils.renderIntoDocument 를 반환 할 것으로 예상 한 것은 state , props 및 setState 를) 사용할 수있게 해주는 일부 객체입니다.

기능 구성 요소로 구현 된 구성 요소를 테스트하려고합니다. 주요 목표는 구성 요소의 상태를 변경하고 변경된 상태가 테스트에서 예상 한 상태와 일치하는지 확인하는 것입니다.

테스트의 경우 전제 조건이 있습니다. 구성 요소는있는 그대로 테스트해야하며 테스트 목적으로 특별히 코드를 포함하도록 변경해서는 안됩니다. 따라서 forwardRef/useImperativeHandle 를 사용하도록 구성 요소 자체를 변경하는 것은 옵션이 아닙니다.

DeividasBakanas 에 2019년 04월 12일

@DeividasBakanas 함수 구성 요소에는 인스턴스가 없습니다. 이벤트를 전달하여 상태를 업데이트하는 버튼을 트리거 할 수 있습니다. 제 생각에는 이것은 TestUtils.renderIntoDocument 에서 반환 된 인스턴스를 명령 적으로 업데이트하는 것보다 더 나은 접근 방식입니다 (클래스 구성 요소의 경우).

trueadm 에 2019년 04월 13일

👍1

@trueadm이 언급 한 것처럼 구성 요소 자체의 구현 세부 정보를 테스트하지 않는 것이 좋으며 props / events를 사용하여 업데이트를 트리거하고 구성 요소 출력에 대한 어설 션을 수행하는 것이 좋습니다. react-testing-library https://github.com/kentcdodds/react-testing-library 와 같은 라이브러리를 추천하여 좀 더 쉽게 할 수 있습니다. Kent는 또한 주제에 대해 광범위하게 씁니다.

이 문제는 버그 / 기능 요청이 아닌 사용 질문이므로 종료합니다.

threepointone 에 2019년 04월 15일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: TestUtils.renderIntoDocument는 유효한 기능 구성 요소가 전달되면 'null'을 반환합니다.

모든 4 댓글

관련 문제