Hire +Plus 자체 문서화: V1 (2)

내가 다루는 것

Typescript 설정

타이프 스크립트 오류 수정

React로 Cypress 설정

첫 번째 테스트 파일

사용하기에 적합한 VScode 확장

이 앱의 주요 부분을 제작하기 전에 작게 시작하여 확장하고 싶습니다. 일찍 시작하기 위해 typescript와 cypress 테스트를 일찍 추가했습니다.

Typescript 추가

기존 프로젝트이기 때문에 별도로 TypeScript를 설치해야 합니다.

첫째: TypeScript를 설치하는 데 필요한 모든 것을 설치합니다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest
둘째: 루트 디렉터리에 tsconfig.json 파일을 만들고 붙여넣습니다. 모든 것이 작동하도록 하는 기본 TypeScript 설정입니다.

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "downlevelIteration": true,
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": ["src"]
}

마지막으로 반응 구성 요소 확장을 .js/.jsx에서 typescript 확장( .ts/tsx )으로 변환했습니다.

구성 요소를 Typescript로 실행

여기서 크게 달라진 것 같지는 않지만 구성 요소의 확장자를 .tsx로 변경하고 TypeScript로 변환했습니다. The const Launch: React.FunctionalComponent = () =>는 이 구성 요소 유형이 소품이 없는 기능적 구성 요소임을 보장합니다. 간단한 전환이지만 진행하면서 더 복잡해집니다.

index.tsx 파일의 오류 수정

Launch 구성 요소를 변환할 때 이 오류가 발생했습니다. 나는 typescript가 null일 수 있기 때문에 ID가 루트인 요소가 dom에 있는지 확인해야 한다는 것을 (인터넷 검색을 통해) 발견했습니다.

해결책은 ! 루트 요소를 잡을 때. ID가 루트인 요소가 항상 있는지 확인합니다.
link to solution on stackoverflow

이제 해당 오류를 수정했으므로 공식적으로 TypeScript를 구성하고 작동합니다. 테스트에 들어가겠습니다.

React와 함께 Cypress 사용

cypress를 사용하여 테스트를 실행하겠습니다. 설정은 간단했습니다(기쁩니다!). Cypress에는 테스트를 실행할 대시보드와 환경이 있습니다. Cypress는 cypress를 사용하여 단위, 통합 및 엔드 투 엔드 테스트를 실행할 수 있습니다.

첫 번째: npm으로 cypress 설치npm install cypress --save-dev
둘째: 사이프러스 환경 개방npx cypress open
두 가지 일이 일어날 것입니다.

cypress 환경이 열리고 통합 폴더에 샘플 테스트가 표시됩니다.

프로젝트 폴더에 동일한 샘플 테스트로 cypress 폴더가 생성됩니다. 여기에서 테스트를 작성할 수 있습니다.

마지막으로 시작 페이지가 올바르게 렌더링되는지 확인하는 간단한 테스트를 작성했습니다. 통합 폴더 안에 launch.spec.js 파일을 생성했습니다.