toHaveTextContent 에러

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

작성

366

수정됨

안녕하세요.

'context wrapper 추가로 에러 제거하기' 강의에서 발생한 에러가 해결되지 않아 질문 드립니다.

https://www.inflearn.com/questions/736423/tohavetextcontent-%EC%97%90%EC%84%9C-%EC%97%90%EB%9F%AC%EA%B0%80-%EC%9E%90%EA%BE%B8-%EB%82%98%EB%8A%94%EB%8D%B0-%EC%95%84%EB%AC%B4%EB%A6%AC-%EC%B0%BE%EC%95%84%EB%8F%84-%EC%9E%98-%EB%AA%A8%EB%A5%B4%EA%B2%A0%EC%8A%B5%EB%8B%88%EB%8B%A4

이 글과 동일한 에러가 계속 발생하는데, 이 질문자분이 답글로 남겨주신 코드로 수정해보아도 해결이 되지 않습니다. 어디서 문제가 발생한 건지 강의를 다시 보고 또 봐도 찾기가 어려워 깃허브 주소 남깁니다. 감사합니다.

● update product's total when products change

    expect(element).toHaveTextContent()

    Expected element to have text content:
      1000
    Received:
      총 가격: 0

      16 |   userEvent.clear(americaInput);
      17 |   userEvent.type(americaInput, "1");
    > 18 |   expect(productsTotal).toHaveTextContent("1000");
         |                         ^
      19 | });
      20 |

      at Object.<anonymous> (src/pages/OrderPage/test/calculate.test.js:18:25)

https://github.com/daeunleeeee/react-shop-test

react 웹앱 React-Context jest 소프트웨어-테스트

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

해당 오류는 코드 내의 expect와 받은 결과 값이 일치하지 않아 발생하는 오류이며, 특히나 “toHaveTextContent”는 Jest에서 제공하는 함수로 Element 내의 textContent 값을 비교하는데 사용되는 함수입니다.

해당 오류를 해결하기 위해서는, 우선 두번째 인자 값으로 예상되는 textContent 값(“1000”)이 맞는지 확인해보아야 합니다. 만약 textContent가 맞는데 해당 오류가 발생한다면, 코드 내의 Element Selecting 부분이나 React Component 내부에 오류가 있을 수 있으니 확인해보시기 바랍니다.

더 자세한 내용은 해당 링크인 https://github.com/testing-library/jest-dom/issues/81 에서 확인하실 수 있습니다.

이상입니다. 더 궁금한 점이 있으시면 언제든지 문의해주세요. 감사합니다.

pt_daeun.lee

질문자

안녕하세요. 답변 주신 내용 확인하고 코드에서 오류를 찾아보려고 했는데 찾을 수가 없습니다. 혹시 직접적인 도움을 받는 것은 어려울 까요? 강의를 여러 번 보고 코드를 비교해봐도 어떤 코드에서 문제가 생긴 건지 모르겠습니다.

인프런 커뮤니티 질문&답변

toHaveTextContent 에러