적절한 파일 확장 사용을 보장하여 TypeScript의 반응 구성 요소를 테스트하는 동안 구문 오류를 극복하십시오. 일반적인 렌더링 문제를 효과적으로 해결하는 방법을 배우십시오. ---이 비디오는 https://stackoverflow.com/q/66177174/ 사용자가 'Alex Ironside'(https://stackoverflow.com/u/7055769/)에 의해 질문하고 https://stackoverflow.com/a/66178542/ 사용자가 제공하는 답변을 기반으로합니다. '스택 오버 플로우'웹 사이트에서 https://stackoverflow.com/u/488012/). 이 훌륭한 사용자와 StackexChange 커뮤니티 덕분에 공헌에 감사드립니다. 대체 솔루션, 주제, 주석, 개정 내역 등에 대한 대체 솔루션, 최신 업데이트/개발과 같은 원본 콘텐츠 및 더 자세한 내용은 이러한 링크를 방문하십시오. 예를 들어, 질문의 원래 제목은 다음과 같습니다. 오류는 CC BY-SA BY-sa https://meta. 4.0 '(https://creativecommons.org/licenses/by-sa/4.0/) 라이센스 및 원본 답변 게시물은'CC BY-SA 4.0 '(https://creativecommons.org/licenses/by-sa/4.0/) 라이센스에 따라 라이센스가 부여됩니다. 당신에게 어떤 것이 보이면, vlogize [at] gmail [dot] com에서 저를 보내 주시기 바랍니다. --- React 구성 요소 테스트에서 예기치 않은 토큰 오류 해결 RECT 및 TypeScript를 사용하여 응용 프로그램을 개발하는 것은 개발자 간의 일반적인 추세로 구성 요소의 표현 기능과 TypeScript가 제공하는 유형 안전을 결합합니다. 그러나 테스트와 관련하여 특히 구성 요소를 렌더링 할 때 다양한 오류가 발생할 수 있습니다. 그러한 오류 중 하나는 악명 높은 예기치 않은 토큰 오류입니다. 이 안내서에서는이 문제를 탐색하고 당신이 궤도에 올라갈 수 있도록 명확한 솔루션을 제공 할 것입니다. 문제 : 오류 이해 오류 이해 반응 테스트 렌더러의 Create Function을 사용하여 React 구성 요소를 렌더링하려고하지만 성가신 구문 오류가 충족됩니다. 다음은 다음과 같은 문제를 해결할 수있는 단순화 된 코드입니다. [[이 텍스트 또는 코드 스 니펫을 공개하려면 비디오 참조] 테스트를 실행할 때 다음과 비슷한 오류 메시지가 표시 될 수 있습니다. 이 문제는 TypeScript 컴파일러에서 비롯됩니다. JSX 구문 - React에 사용되는 HTML 유사 구문 인 JSX 구문을 인식하지 못합니다. 이 감독은 종종 사용중인 파일 확장자와 관련이 있습니다. 솔루션 : 올바른 파일 확장자 파일 확장을 확인 하십시오이 오류를 해결하는 첫 번째 단계는 구성 요소가 포함 된 파일이 올바른 확장자를 사용하는지 확인하는 것입니다. JSX 구문이 포함 된 TypeScript 파일의 경우 파일 확장자는 .tsx 여야합니다. 파일 이름 바꾸기 : 현재 파일의 이름이 myComponent.ts와 같은 이름을 가진 경우 MyComponent.tsx로 이름을 바꿉니다. 가져 오기 편집 : 가져 오기 경로가 올바른 .tsx 파일을 가리키고 있는지 확인하십시오. .tsx를 사용하는 이유는 무엇입니까? .tsx 확장자를 선택하는 것은 TypeScript 컴파일러에게 표준 .TS 파일에서 인식되지 않는 JSX 구문을 처리하도록 지시하기 때문에 중요합니다. JSX가 포함 된 파일에 대해 .tsx를 고수 해야하는 몇 가지 이유는 다음과 같습니다. 유형 안전 : React로 작업하는 동안 TypeScript의 유형 안전한 이점을 유지합니다. 최종 단계 : 파일 확장자를 .tsx로 변경 한 후 코드를 테스트하고 테스트 케이스를 다시 실행하여 예상치 못한 토큰 오류가 해결되었는지 확인하십시오. 모든 것이 잘 진행되면 구성 요소는 문제없이 성공적으로 렌더링해야합니다. 결론에 오류가 발생하면 TypeScript에서 React 구성 요소로 작업 할 때 오류가 발생할 수 있지만 이러한 오류의 원인을 이해하면 많은 시간과 두통이 절약 될 수 있습니다. JSX 구문이 포함 된 파일에 적절한 .tsx 확장자를 항상 사용해야합니다. 이 작은 조정은 테스트 중에 구성 요소가 올바르게 렌더링되도록하는 데 큰 도움이됩니다. 이제이 팁을 프로젝트에 적용하고 React and TypeScript에서 자신있게 코딩하십시오!
