문제에서 벗어나기

이것은 React 구성 요소 목에 대한 시리즈의 마지막 부분입니다. 요약으로 마무리한 다음 직면하게 될 몇 가지 일반적인 어려움을 살펴보겠습니다.


이 게시물의 모든 코드 샘플은 다음 리포지토리에서 사용할 수 있습니다.

dirv / 조롱 반응 구성 요소

React 구성 요소를 조롱하는 방법의 예

모의는 악명 높은 어려운 테스트 시설입니다. 그렇기 때문에 일부 교육자들은 사용하지 않고 가르치지 않습니다.

그러나 Mock을 마스터하면 깨지기 쉽고 시간을 잡아먹는 테스트에 맞서 싸울 수 있는 추가 무기를 얻을 수 있습니다.

그렇다면 모의 객체를 안전하게 사용하려면 어떻게 해야 할까요? 단순함: 패턴에 충실하세요!

패턴에 충실

이 시리즈에서 보여드린 패턴을 고수한다면 문제가 없을 것입니다.
div가 첨부된 data-testid를 렌더링하는 기본 모의 함수로 시작합니다. 우리는 이것을 에서 보았습니다.

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(() => (
    <div data-testid="PostContent" />
  ))
}))

필요한 경우 children도 렌더링할 수 있습니다. 에 설명되어 있습니다.

   jest.mock("../src/PostContent", () => ({
     PostContent: jest.fn(({ children }) => (
       <div data-testid="PostContent">{children}</div>
     ))
   }))

정말 필요한 경우 prop 값을 사용하여 고유한 data-testid s를 만들 수 있습니다. 그러나 이것은 종종 불필요한 복잡성입니다. 그것은 .

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(({ children, id }) => <div data-testid={`PostContent-${id}`}>{children}</div>)
}))

나는 무엇을 피해야 하는지에 대해 조언하는 것을 항상 싫어합니다. 모든 기술에는 제자리가 있습니다. 그러나 한 가지 주의해야 할 사항이 있다면 그것은 가짜 구축, 특히 Jest 기능mockImplementation의 사용이라고 말하고 싶습니다.

왜요? 스파이와 스텁을 사용하는 주된 이유는 속도를 늦추지 않는 독립적인 테스트 스위트를 구축하는 데 도움이 되기 때문입니다.

이를 수행하는 중요한 방법은 코드를 적은 수의 패턴으로 제한하는 것입니다. 일련의 코딩 표준을 갖는 것과 약간 비슷하지만 더 높은 수준입니다.

가짜와 정교한 모의 구현을 구축하기 시작하면 이제 테스트 내에 논리가 있기 때문에 목표에서 멀어지고 있습니다. 테스트를 한 눈에 보고 작동 방식을 즉시 알 수 없습니다. 그리고 프로덕션 코드를 변경하려면 불가피하게 변경하기 전에 가짜 구현 코드를 다시 이해해야 합니다.

반대로, 내가 보여드린 몇 가지 모의 패턴을 고수하면 이를 사용하는 테스트 작성이 점점 더 빨라질 것입니다. 패턴을 인식하고 볼 때마다 뇌에서 재평가할 필요가 없기 때문입니다.

어떤 패턴도 테스트 도구 모음에 적합하지 않으면 어떻게 됩니까?

막히면 스스로에게 물어볼 첫 번째 질문은 내 프로덕션 코드가 얼마나 테스트 가능한가?입니다.

테스트의 고통을 유발하는 것은 모의 객체가 아니라 테스트 가능성을 위해 구조화되지 않은 프로덕션 코드이기 때문입니다.

코드의 테스트 가능성 향상

React 코드베이스에서 가장 큰 문제는 다양한 아이디어를 표현하는 매우 큰 구성 요소입니다. 종종 새로운 기능은 추상화를 분류하거나 논리적 조직 구조를 찾는 데 시간을 들이지 않고 서로 위에 쌓입니다.

따라서 시작하기 좋은 곳은 큰 구성 요소를 분리하는 것입니다.

크면 얼마나 클까요? 파일 크기는 종종 사용하기에 좋은 메트릭입니다. 저에게는 100줄 이상이면 의심스럽습니다. 그리고 대부분의 구성 요소는 크기가 10줄 미만입니다!

구성 요소를 분할하는 방법이 명확하지 않은 경우 어떻게 합니까? 단일 책임 원칙으로 시작하십시오. 각 구성 요소는 한 가지 일만 수행해야 합니다.

물론, 하나의 "사물"이라는 개념은 목을 매달 수 있는 충분한 밧줄을 남겨줍니다. 우아한 "사물"을 파악하는 것은 소프트웨어 설계에서 가장 어려운 일입니다.

이 주제에 관심이 있다면 React 교육자가 이야기하는 것을 자주 듣지 못하더라도 React 구성 요소에 모두 적용되는 결합, 응집 및 connascence 에 대해 배우는 것이 좋습니다.

여기에서 갈 곳

이 시리즈에서는 React 구성 요소를 테스트하는 매우 구체적인 방법을 보여 주었습니다. 이러한 기술에 대한 더 자세한 이론과 역사에 관심이 있다면 제 책Mastering React Test-Driven Development을 살펴보십시오. React Testing Library를 사용하지 않고 대신 첫 번째 원칙에서 테스트를 탐색합니다. 그렇게 하면 성공적인 React 테스트에 대해 훨씬 더 깊이 이해할 수 있습니다.