효소에서 React 테스트 라이브러리로 마이그레이션

InfoQ 홈페이지 뉴스 효소에서 React 테스트 라이브러리로 마이그레이션 - Sentry 사례 연구

2023년 3월 2일 3분 분량의 글

~에 의해

브루노 쿠리올

Sentry 엔지니어링 팀은 최근 자사 블로그에서 프론트엔드 테스트를 Enzyme에서 ​​React Testing Library로 마이그레이션하면서 얻은 동인과 교훈을 자세히 설명했습니다. 마이그레이션은 Enzyme이 최신 버전의 React를 지원하지 않아 촉발되었습니다. 마이그레이션에는 약 20개월이 걸렸으며 17명의 엔지니어가 약 5,000개의 테스트를 검토했습니다.

Sentry의 엔지니어링 타임즈는 실질적인 이점이 부족하다는 이유로 테스트 기반을 RTL(React Testing Library)로 마이그레이션하지 않기로 여러 번 결정했습니다. 팀은 다음과 같이 회상했습니다.

우리는 새것이라는 이유만으로 물건을 버리지 않습니다. 우리는 새로운 기술을 신중하게 평가하여 그것이 우리 팀에 어떤 이점을 가져다 주는지 이해합니다. RTL은 그 당시 우리에게 알려져 있었지만 왜 그것을 우리 코드베이스에 가져와야 하는지에 대한 강력한 논쟁이 없었습니다. 구성 요소 라이브러리를 테스트하는 데 사용한 라이브러리인 효소는 여전히 우리의 요구를 충족하고 있었습니다.

한편으로 Sentry는 이미 TypeScript로의 대규모 마이그레이션에 참여하고 있었으며, 이는 정규 제품 작업과 함께 엔지니어링 팀을 바쁘게 만들었습니다.

반면, 효소 테스트는 시간이 매우 오래 걸리는 경우가 많았고, 팀에서는 테스트 속도를 높이는 데 큰 관심을 가졌습니다.

(출처: Sentry의 엔지니어링 블로그)

개념 증명에서는 12%의 성능 향상이 나타났는데, 이는 또 다른 장기 마이그레이션 프로젝트를 시작하기에는 불충분한 것으로 간주되었습니다. 그럼에도 불구하고 개념 증명을 통해 RTL이 효소에 비해 눈에 띄는 이점이 있음이 입증되었습니다. 팀 보고에 따르면 Enzyme은 접근성을 테스트하지 않았고 테스트 환경을 자동으로 정리하지 않았으며 테스트 상태에서 구성 요소에 직접 액세스하는 경우가 많았습니다. 반대로 RTL은 통합 테스트에 더 가깝고 사용자 관점에서 애플리케이션 사용 사례를 테스트하려고 노력합니다. 특히 RTL은 구현 세부 사항을 테스트하지 않으려고 노력합니다. 구현 변경은 실제로 버그를 도입한 경우에만 테스트를 중단해야 합니다.

Sentry가 TypeScript로 마이그레이션하고 React 17(React Hooks 포함)로 업그레이드하기 시작한 후 장단점 분석이 변경되었습니다. 팀은 다음과 같이 회상합니다.

[RTL] 마이그레이션은 React를 버전 17로 업데이트하기 전까지는 여전히 큰 주목을 받지 못했습니다. React 코어 팀은 라이브러리의 내부를 완전히 다시 작성했고 Enzyme은 여러 내부 React 기능을 직접 사용했습니다.[…] Enzyme은 그렇지 않았습니다. 이 새 버전의 React에서는 100% 작동하지만 이 문제를 해결하는 어댑터가 시장에 있었고 우리는 그것을 사용했습니다. 그러나 이 솔루션은 React 18에서 완전한 재작성을 요구하므로 장기적으로 작동하지 않을 것입니다. 이는 Airbnb가 Enzyme에 대한 지원을 중단했기 때문에 일어날 가능성이 낮습니다.[…] RTL은 React의 내부에 의존하지 않습니다. 16 및 17에서와 마찬가지로 React 18에서도 계속 동일하게 작동합니다.

승인을 받은 후 마이그레이션 프로젝트의 위험을 최소화하는 데 초점이 전환되었습니다(다양한 가설에 따른 엔지니어링 추정, 빅뱅 마이그레이션에 대한 반복적 접근 방식, 진행 상황 추적, RTL 교육, 모범 사례 표면화, 일일 코드 검토 등). ).

마이그레이션은 18개월 후에 완료되었습니다(예상 14개월 대비). 이를 통해 팀은 오래된 테스트를 제거하고, 이전에 간과되었던 측면인 접근성을 개선하고, 구현 세부 사항 대신 사용 사례를 기반으로 테스트를 작성할 수 있었습니다.

팀에서는 일부 RTL 권장 사항을 문자 그대로 따를 때 발생하는 예상치 못한 성능 문제를 자세히 설명했습니다(예: 웹 API를 조롱하는 것 외에도 사용자를 최대한 현실적으로 조롱). 테스트 성능 측면(초기 개념 증명에 대한 관심을 불러일으킨 주요 문제점)에서 극적인 개선이 이루어지지 않았음에도 불구하고 팀은 다음과 같이 긍정적으로 결론을 내렸습니다.