앱 테스트 및 검증하기

Lovable은 브라우저 테스트, frontend 테스트, Edge Function 검증을 제공하여 시스템 동작을 이해하고, 사용자 워크플로우를 검증하고, backend 로직이 예상대로 작동하는지 확인할 수 있도록 도와줍니다.

Lovable은 애플리케이션이 예상대로 동작하는지 확인할 수 있는 여러 가지 방법을 제공합니다. 이러한 도구들은 문제를 재현하고, 수정을 확인하고, frontend 및 backend 동작 전반에서 회귀를 방지하는 데 도움이 됩니다.

검증 중 Lovable이 관찰할 수 있는 것

Lovable은 에이전트가 검증 도구를 실행할 때 정보를 수집합니다. 이 정보는 해당 도구의 일부로 자동으로 수집되며 앱에서 무슨 일이 일어나고 있는지 이해하는 데 사용됩니다.

Lovable이 캡처할 수 있는 것:

• 브라우저 테스트 중 브라우저 콘솔 로그
• 브라우저 테스트 중 발생한 네트워크 요청
• 테스트 실행의 테스트 실패 및 빌드 오류
• backend 함수를 직접 호출할 때의 요청 및 응답 데이터

이러한 신호는 관련 도구가 사용될 때마다 사용 가능하며, 추가적인 수동 디버깅 없이도 문제를 진단하기에 충분한 경우가 많습니다.

Lovable은 여러 테스트 접근 방식을 지원하며, 각각 다른 종류의 검증을 위해 설계되었습니다. 대부분의 테스트는 두 가지 범주 중 하나에 속합니다:

• 완전한 사용자 플로우 확인
• 격리된 특정 규칙 또는 동작 확인

브라우저 테스트

브라우저 테스트는 브라우저에서 앱과 상호작용하여 실제 사용자 동작을 확인합니다. 에이전트는 페이지를 탐색하고, 버튼을 클릭하고, 양식을 작성하고, 요청을 제출할 수 있습니다. 그 과정에서 스크린샷을 캡처하고, UI 요소를 검사하고, 콘솔 및 네트워크 활동을 관찰할 수 있습니다.

다음 경우에 브라우저 테스트를 사용하세요:

• 누군가가 손상되었거나 예상치 못한 UI 동작을 보고했을 때
• 온보딩이나 결제와 같은 다단계 플로우를 확인해야 할 때
• 문제가 라우팅, 인증, 타이밍 또는 상태에 따라 달라질 수 있을 때
• 사용자 관점에서 변경 사항을 확인하고 싶을 때

브라우저 테스트는 다른 방법보다 느리지만, 사용자가 실제로 경험하는 것에 대한 가장 명확한 그림을 제공합니다.

브라우저 테스트는 조사 중에 에이전트에 의해 시작될 수 있습니다. 명시적으로 요청할 수도 있습니다.

예시

브라우저 테스트를 사용해서 결제 플로우를 검증해줘.

Frontend 테스트

Frontend 테스트는 명확한 어서션을 사용하여 격리된 환경에서 UI 동작을 검증합니다. 특정 UI 로직이 시간이 지나도 예상대로 계속 작동하는지 확인하는 데 유용합니다.

Frontend 테스트는 시뮬레이션된 브라우저 환경에서 실행되며, 빠르게 실행되고 일관된 결과를 제공하며, 일반적으로 컴포넌트 옆에 .test.tsx 파일로 존재합니다.

테스트 스택

• Vitest
• React Testing Library
• jsdom

다음 경우에 frontend 테스트를 사용하세요:

• 문제가 명확한 규칙이나 기대로 설명될 수 있을 때
• UI 회귀를 수정하고 다시 발생하지 않도록 하고 싶을 때
• 양식, 테이블, 필터와 같은 조건부 렌더링이나 복잡한 상태로 작업할 때
• 전체 앱을 실행하지 않고 빠른 피드백을 원할 때

Frontend 테스트는 요청할 때만 실행됩니다.

예시

로그인 양식에 대한 frontend 테스트를 작성하고 실행해줘.

Edge Function을 사용한 Backend 검증

Lovable은 Edge Function의 backend 동작을 검증하는 두 가지 보완적인 방법을 제공합니다: 직접 호출과 자동화된 테스트. 이러한 접근 방식은 종종 함께 사용됩니다.

Edge Function 직접 호출

직접 호출을 통해 에이전트가 특정 입력으로 Edge Function을 실행하고 결과를 즉시 검사할 수 있습니다. 이를 통해 UI 관련 복잡성을 피하고 빠른 격리에 유용합니다. 로그인한 경우, 인증된 호출은 현재 세션을 사용할 수 있습니다.

다음 경우에 직접 호출을 사용하세요:

• backend 문제가 의심되고 UI와 분리하고 싶을 때
• 특정 매개변수나 입력을 확인해야 할 때
• 변경 전후의 동작을 비교하고 싶을 때
• 인증된 동작을 디버깅할 때

Edge Function 직접 호출은 요청할 때만 실행됩니다.

예시

잘못된 이메일로 signup Edge Function을 직접 호출해줘.

Edge 테스트

Edge 테스트는 시간이 지나도 backend 규칙을 확인하는 자동화된 테스트입니다. 중요한 로직이 조용히 손상되지 않도록 보장하는 데 도움이 됩니다.

테스트 스택

• Deno 내장 테스트 러너
• 네이티브 TypeScript 지원

다음 경우에 edge 테스트를 사용하세요:

• Edge Function을 변경하고 회귀 보호를 원할 때
• 비즈니스 규칙이나 권한을 검증할 때
• 문제가 미묘하고 수동으로 확인하기 어려울 때

Edge 테스트는 요청할 때만 실행됩니다.

예시

결제 처리 함수에 대한 edge 테스트를 작성해줘.

Backend 검증 도구의 협력 방식

직접 호출과 edge 테스트는 backend 동작을 디버깅할 때 종종 함께 사용됩니다.

일반적인 순서는 다음과 같습니다:

1. 특정 입력으로 문제를 재현하기 위해 Edge Function을 직접 호출합니다.
2. 동작을 이해하면 수정을 적용합니다.
3. 동일한 입력으로 함수를 다시 호출하여 변경을 확인합니다.
4. 시간이 지나도 동작이 회귀하지 않도록 edge 테스트를 추가합니다.

이 접근 방식은 장기적인 검증을 제공하면서도 반복을 빠르게 유지합니다.

FAQ