fullstack react tdd example

반응 구성 요소 중심 개발 및 DOM 테스트 Monorepo

React 구성 요소 중심 개발 및 Dom Testing Monorepo에 오신 것을 환영합니다! 이 저장소에는 TDD (Test-Driven Development) 및 DOM 테스트를 사용하여 React Applications를 구축하는 것에 대한 포괄적 인 대화를위한 모든 코드 및 예제가 포함되어 있습니다. 다음은 대화 자체에 대한 링크입니다. Monorepo는 PNPM 및 Turborepo를 사용하여 구성하여 패키지 관리를 간소화하고 프로세스를 구축합니다.

Monorepo의 개념에 익숙하지 않은 경우 여러 프로젝트를 포함하는 단일 저장소입니다. 이 경우 Monorepo에는 공유 UI 라이브러리와 몇 개의 React 응용 프로그램이 포함되어 있습니다. 공유 UI 라이브러리에는 재사용 가능하고 접근 가능한 React 구성 요소와 테스트 및 스토리가 포함되어 있습니다. RECT 응용 프로그램은 구성 요소 사용 및 통합을 보여줍니다. 다음.js 응용 프로그램은 Mantine UI 라이브러리의 모달 구성 요소와의 반응의 구성의 힘을 보여줍니다.

Monorepos에 대한 자세한 내용은 여기를 참조하십시오.

개요

이 Monorepo의 주요 목표는 재사용 가능하고 접근 가능한 React 구성 요소를 구축하기위한 모범 사례를 보여주고 React Testing Library 및 Storybook과 같은 도구를 사용하여 효과적으로 테스트하는 방법입니다. 또한 테스트에서 외부 종속성을 처리하기 위해 모의 서비스 작업자의 사용을 보여주고 BFF (Backend-for-Frontend) 패턴을 수행합니다. 이 대화는 프론트 엔드와 백엔드 경험이 혼합되어있는 청중을 위해 조정되어 React의 구성의 힘과 구성 요소 개발 및 테스트 모두에 적용되는 방법을 강조합니다.

궁극적으로 우리는이 인터페이스를 구축하고 테스트하는 방법을 봅니다.

내용물

Monorepo는 다음과 같이 구성됩니다.

앱

• frontend : Create React App을 사용하여 구성된 React 응용 프로그램으로 구성 요소 사용 및 통합을 보여줍니다.
• mantine-example : Mantine UI 라이브러리의 모달 구성 요소와 반응하는 구성의 힘을 보여주는 Next.js 응용 프로그램. 이 응용 프로그램은 대화 소개로 사용되며 React 구성 요소를 구축하고 테스트 할 때 구성의 이점을 강조합니다.

패키지

• ui : 테스트 및 스토리와 함께 재사용 가능하고 접근 가능한 React 구성 요소가 포함 된 공유 UI 라이브러리의 예.
• types : 다른 패키지에서 사용하는 TypeScript 유형을 포함하는 공유 라이브러리.
• mocks : 다른 패키지에서 사용하는 모의 데이터가 포함 된 공유 라이브러리.

시작하기

Monorepo를 실행하려면 전 세계적으로 PNPM을 설치해야합니다.

이 Monorepo를 개발할 때 사용되는 PNPM 버전은 8.2.0 이며 노드 버전 18.16.0 입니다.

설치된 스토리 북 버전에는 이전 버전의 노드를 실행할 때 문제가 있습니다. 최소 노드 버전 18.16.0 사용하십시오.

Monorepo의 종속성을 설치하려면 다음 명령을 실행하십시오.

pnpm install
pnpm build

Monorepo는 다음 명령을 사용하여 실행할 수 있습니다.

• pnpm run dev : 개발 모드에서 Monorepo를 실행합니다.
• pnpm run build : 생산을위한 Monorepo를 구축합니다.
• pnpm run start : Monorepo를 생산 모드에서 실행합니다.
• pnpm run test : Monorepo 테스트를 실행합니다.

스토리 북을 실행하려면 다음 명령을 실행하십시오.

pnpm run storybook

실행 테스트

Repo의 모든 테스트를 실행하거나 특정 패키지의 실행 테스트를 수행 할 수 있습니다.

모든 테스트를 실행하려면 다음 명령을 실행하십시오.

pnpm run test

특정 패키지에 대한 테스트를 실행하려면 Directory로 CD를 실행하고 다음 명령을 실행하십시오.

pn test -- --watch

응용 프로그램 테스트를 실행하려면 다음 명령을 실행하십시오.

 cd apps/frontend
pnpm run test -- --watch

구성 요소 테스트를 실행하려면 다음 명령을 실행하십시오.

 cd packages/ui
pnpm run test -- --watch

이 Monorepo가 React 구성 요소 중심 개발 및 DOM 테스트를위한 모범 사례를 이해하는 데 유용하다는 것을 알게되기를 바랍니다. 코드를 탐색하고 예제를 실행하며 저장소에 기여하십시오. 행복한 코딩!

추가 메모

현대적인 프론트 엔드를위한 제안 된 API 아키텍처는 프론트 엔드 패턴의 백엔드입니다.

당신은 그것에 대해 더 읽을 수 있습니다.

AI는 대화에 대한 메모를 생성했습니다

프레젠테이션의 요약 및 주요 테이크 아웃은 다음과 같습니다.

요약 : Pack Software의 이사 인 Paul Hammond는 테스트 중심의 개발, 접근성 및 현대적인 프론트 엔드 관행과 같은 주제를 다루는 REACT 및 DOM 테스트를 통한 구성 요소 중심 개발에 대해 제시합니다.

아이디어 :

• 구성 요소 중심 개발은 재사용 가능하고 일관된 UI 요소를 구축하는 데 도움이됩니다
• 구현 세부 사항보다는 행동에 대한 테스트는 더 많은 가치를 제공합니다.
• 프론트 엔드 구성 요소를 구축 할 때는 접근성이 중요한 고려 사항이어야합니다.
• 스토리 북과 같은 도구는 대화식 개발 및 구성 요소 문서화 허용
• Mock Service Worker는 테스트 및 개발을 위해 API를 조롱 할 수 있습니다.
• BFF (Backend for Frontend) 패턴은 프론트 엔드 아키텍처를 단순화 할 수 있습니다
• 좋은 테스트는 시간이 지남에 따라 변화를 일으킬 수있는 자신감을줍니다
• React Testing Library는 사용자의 관점에서 테스트를 권장합니다
• TDD는보다 유지 관리 가능하고 유연한 코드로 이어질 수 있습니다
• 합성 가능한 구성 요소를 사용하면 사용자 정의 및 재사용이 쉬워집니다

통찰력 :

• 구현 대신 테스트 동작을 테스트하면 더 쉽게 리팩토링 및 유지 보수가 가능합니다.
• 테스트에서 액세스 가능한 선택기는 전반적인 응용 프로그램 접근성을 향상시킬 수 있습니다
• 스토리 북과 같은 구성 요소 탐색기는 디자이너와 개발자 간의 협업을 용이하게합니다.
• 네트워크 수준에서 조롱하면 테스트 및 개발 전반에 걸쳐 일관된 모의가 가능합니다.
• TDD는 더 빠른 피드백 루프와 코드 변경에 대한 신뢰도를 높일 수 있습니다.
• 배송 결과에 중점을두면 팀이 TDD 관행을 채택하도록 설득 할 수 있습니다.
• 긴밀히 테스트하기 위해 DOM 사용 실제 사용자 상호 작용
• 비즈니스 로직에서 UI 문제를 분리하면 전반적인 응용 프로그램 아키텍처가 향상됩니다.
• "워킹 골격"과 같은 지속적인 배송 관행은 프로젝트 설정을 향상시킬 수 있습니다.
• 통합/E2E 테스트와의 밸런싱 단위 테스트는 다양한 테스트 시나리오를 다룹니다.

인용 부호:

• "좋은 테스트의 목적은 시간이 지남에 따라 변화 할 수있는 자신감을주는 것입니다."
• "테스트가 통과되면 바로 생산으로 갈 수있을만큼 자신감이 있어야합니다."
• "현대 프론트 엔드는 페이지가 아닌 구성 요소로 제작되었습니다."
• "구성 요소 구동 개발은 중복을 줄이는 재사용 가능한 구성 요소를 구축하는 데 도움이됩니다."
• "우리는 시간이 지남에 따라 어떻게 변화를하는지, 테스트가 시간이 지남에 따라 변화를 만드는 데 어떻게 도움이되는지 알고 싶습니다."
• "좋은 테스트를 통해 시간이 지남에 따라 변화 할 수있는 자신감을 가져야합니다."
• "TDD의 기쁨은 그것이 해방 된 경험이기 때문에 그것을 넣는 올바른 방법입니다."
• "나는 10 년 동안 늦게 일하지 않았으며, 필요하지 않기 때문에 시험 우선 스타일로 글을 쓸 필요가 없어야합니다."
• "테스트와 관련하여, 내가 일반적으로하는 일 중 하나는 ... 누군가의 지점을 끌어 내고 시험을 실행하고 의도적으로 무언가를 실패하고 테스트를 볼 것입니다."
• "나는 그것이 작동하는 방식이라고 확신해야합니다."

버릇:

• 구현 코드 전에 테스트를 작성하여 적절한 테스트 범위를 보장합니다.
• 테스트에서 액세스 가능한 선택기를 사용하여 전반적인 접근성을 향상시킵니다
• Storybook과 같은 도구를 사용하여 디자이너와 긴밀히 협력하십시오
• 강력한 테스트 스위트를 사용하여 자신있게 리팩터 코드
• 개발 중 즉시 피드백을 위해 시계 모드에서 테스트 실행
• Mock Service Workers를 사용하여 테스트에서 API 응답을 시뮬레이션합니다.
• 프로젝트 초기에 CI/CD 파이프 라인을 설립하기 위해 걷는 골격 구축
• 의도적으로 코드를 위반하여 테스트 범위를 확인하여 요청을 검토합니다.
• 프론트 엔드 테스트에서 구현 세부 사항보다 테스트 동작의 우선 순위를 정합니다
• 프론트 엔드 개발에서 모범 사례를 지속적으로 배우고 적용하십시오

사리:

• React Testing Library는 DOM 테스트 라이브러리 위에 구축되었습니다.
• Jest는 테스트를 위해 JSDOM이라는 메모리 DOM 표현을 사용합니다.
• 모의 서비스 작업자는 네트워크 수준에서 API 호출을 가로 채고 모킹 할 수 있습니다.
• 스토리 북은 UI 구성 요소를 분리하는 도구입니다.
• 접근성은 어떤 형태로 인구의 30-40%에 영향을 미칩니다
• 구성 요소 중심 개발은 프레임 워크 공연이며 React, Vue, Angular 등에 적용됩니다.
• 테스트 중심의 개발은 버그가 적고 유지 관리 가능한 코드가 더 적용될 수 있습니다.
• 프론트 엔드 패턴의 백엔드는 프론트 엔드 성능을 향상시키고 아키텍처를 단순화 할 수 있습니다.
• Cypress and Playwright는 웹 응용 프로그램의 엔드 투 엔드 테스트를위한 도구입니다.
• 돌연변이 테스트는 테스트 스위트의 품질을 확인하는 데 사용될 수 있습니다.

참조 :

• 반응 테스트 라이브러리
• 스토리 북
• 모의 서비스 직원
• 농담
• 사이프러스
• 극작가
• Redux 툴킷
• 반응 쿼리
• JavaScript 테스트 (Kent C. Dodds)
• W3C 웹 접근성 이니셔티브 (WAI)
• Ian Cooper의 대화 "TDD : 어디서 잘못 되었습니까?"
• Github 프라이머 (UI 구성 요소 라이브러리)
• 도서관 놀이터 테스트
• 프론트 엔드 (BFF) 패턴의 백엔드

일회용 테이크 아웃 : React Testing Library를 통한 테스트 중심 개발은 행동 및 접근성에 중점을 두어 자신감 있고 유지 관리 가능한 프론트 엔드 코드를 가능하게합니다.

권장 사항 :

• 프론트 엔드 애플리케이션에서 재사용 성과 일관성을 향상시키기 위해 구성 요소 중심 개발 채택
• 스토리 북 또는 유사한 도구를 사용하여 UI 구성 요소를 개발하고 문서화하십시오.
• 품질 향상을 위해 프론트 엔드 코드에 대한 테스트 중심 개발 관행 구현
• 보다 탄력적 인 테스트에 대한 구현 세부 사항보다는 행동 테스트에 중점을 둡니다.
• 테스트 및 개발에서 일관된 API 조롱을 위해 모의 서비스 작업자 활용
• 프론트 엔드 아키텍처를 단순화하기 위해 프론트 엔드 패턴의 백엔드 구현을 고려하십시오.
• 처음부터 구성 요소 설계 및 테스트의 접근성 우선 순위
• React Testing Library의 액세스 가능한 선택기를 사용하여 전반적인 응용 프로그램 접근성을 향상시킵니다.
• 프로젝트 초기에 지속적인 통합 및 전달 관행을 구현합니다
• 포괄적 인 커버리지에 대한 통합 및 엔드 투 엔드 테스트를 통한 균형 단위 테스트