기본 튜토리얼: Jest로 React 컴포넌트 테스트하기

코드 테스트는 많은 개발자에게 혼란스러운 작업입니다. 테스트를 작성하려면 더 많은 노력과 시간, 가능한 사용 사례를 예측하는 능력이 필요하기 때문에 이는 이해할 수 있는 일입니다. 소규모 프로젝트를 진행하는 스타트업과 개발자는 리소스와 인력 부족으로 인해 테스트를 완전히 무시하는 경향이 있습니다.

그러나 다음과 같은 몇 가지 이유로 구성 요소를 테스트해야 한다고 생각합니다.

1. 코드에 대한 자신감을 더 높여줍니다.
2. 테스트를 통해 작업 효율성을 높일 수 있습니다.

React도 다르지 않습니다. 전체 애플리케이션이 유지 관리하기 어려운 여러 구성 요소로 변하기 시작할 때 테스트는 안정성과 일관성을 제공할 수 있습니다. 첫날부터 테스트를 작성하면 더 나은 코드를 작성하고, 버그를 쉽게 잡아내고, 더 나은 개발 작업 흐름을 유지하는 데 도움이 됩니다.

이 글에서는 React 구성 요소에 대한 테스트를 작성하기 위해 알아야 할 모든 것을 안내해 드리겠습니다. 또한 몇 가지 모범 사례와 기술도 다루겠습니다. 시작하자!

React에서 구성요소 테스트

테스트는 테스트 주장이 올바른지, 애플리케이션 수명 동안 올바른 상태로 유지되는지 확인하는 프로세스입니다. 테스트 어설션은 코드에 오류가 없으면 true를 반환하는 부울 식입니다.

예를 들어, 주장은 다음과 같이 간단할 수 있습니다: "사용자가 /login로 이동하면 ID가 #login인 모달이 렌더링되어야 합니다. 따라서 로그인 구성 요소를 어떻게든 조작한 것으로 밝혀지면 어설션은 false 를 반환합니다. 어설션은 렌더링되는 내용에만 국한되지 않고 애플리케이션이 사용자 상호 작용 및 기타 작업에 응답하는 방식에 대한 어설션도 만들 수 있습니다.

프런트엔드 개발자는 다양한 자동화된 테스트 전략을 사용하여 코드를 테스트할 수 있습니다. 우리는 React에서 널리 사용되는 세 가지 소프트웨어 테스트 패러다임인 단위 테스트, 기능 테스트, 통합 테스트에 대한 논의를 제한할 것입니다.

단위 테스트

단위 테스트는 테스트 업계에서 여전히 인기가 있는 테스트 베테랑 중 하나입니다. 이름에서 알 수 있듯이 개별 코드 조각을 테스트하여 예상대로 독립적으로 작동하는지 확인합니다. React의 컴포넌트 아키텍처로 인해 단위 테스트는 자연스러운 선택입니다. 또한 브라우저에 의존할 필요가 없기 때문에 더 빠릅니다.

단위 테스트는 각 구성 요소를 개별적으로 생각하고 기능으로 처리하는 데 도움이 됩니다. 특정 구성 요소에 대한 단위 테스트는 다음 질문에 답해야 합니다.

1. 소품이 있나요? 그렇다면 이것이 그들에게 어떤 영향을 미치나요?
2. 어떤 구성요소를 렌더링하나요?
3. 상태가 있어야 하나요? 상태를 언제 또는 어떻게 업데이트하나요?
4. 설치, 제거 또는 사용자 상호 작용 중에 따라야 하는 절차가 있나요?

기능 테스트

기능 테스트는 애플리케이션 일부의 동작을 테스트하는 데 사용됩니다. 기능 테스트는 일반적으로 사용자 관점에서 작성됩니다. 기능은 일반적으로 단일 구성 요소로 제한되지 않습니다. 완전한 양식일 수도 있고 전체 페이지일 수도 있습니다.

예를 들어 등록 양식을 작성할 때 양식 요소, 경고 및 오류(있는 경우)에 대한 구성 요소가 포함될 수 있습니다. 양식이 제출된 후 렌더링되는 구성 요소도 이 기능의 일부입니다. 인메모리 가상 DOM으로 테스트할 것이므로 브라우저 렌더러가 필요하지 않습니다.

통합 테스트

통합 테스트는 모든 개별 구성 요소를 그룹으로 테스트하는 테스트 전략입니다. 통합 테스트는 실제 브라우저에서 테스트를 실행하여 사용자 경험을 복제하려고 시도합니다. 각 테스트 모음이 라이브 브라우저에서 실행되기 때문에 이는 기능 및 단위 테스트보다 훨씬 느립니다.

React에서는 단위 테스트와 기능 테스트가 통합 테스트보다 작성 및 유지 관리가 더 쉽기 때문에 더 많이 사용됩니다. 이것이 바로 이 튜토리얼에서 다룰 내용입니다.

도구를 알아두세요

React 애플리케이션의 단위 및 기능 테스트를 시작하려면 특정 도구와 종속성이 필요합니다. 아래에 나열했습니다.

테스트 프레임워크 있음

Jest는 구성이 전혀 필요하지 않은 테스트 프레임워크이므로 설정이 쉽습니다. Facebook에서 개발했기 때문에 Jasmine 및 Mocha와 같은 테스트 프레임워크보다 더 인기가 있습니다. Jest는 또한 작업자 스레드 전체에서 테스트 실행을 병렬화하는 영리한 기술을 사용하기 때문에 다른 접근 방식보다 빠릅니다. 또한 각 테스트는 두 개의 연속 테스트 간의 충돌을 피하기 위해 샌드박스 환경에서 실행됩니다.

create-react-app을 사용하는 경우 Jest와 함께 제공됩니다. 그렇지 않다면 Jest와 다른 종속성을 설치해야 할 수도 있습니다. 이에 대한 자세한 내용은 공식 Jest 문서 페이지에서 읽을 수 있습니다.

React 테스트 렌더러

create-react-app을 사용하더라도 스냅샷을 렌더링하려면 이 패키지를 설치해야 합니다. 스냅샷 테스트는 Jest 라이브러리의 일부입니다. 따라서 테스트 렌더러를 사용하면 전체 애플리케이션의 UI를 렌더링하는 대신 가상 DOM에서 직렬화 가능한 HTML 출력을 빠르게 생성할 수 있습니다. 다음과 같이 설치할 수 있습니다:

으아아아

ReactTestUtils 및 효소

react-dom/test-utils React 팀에서 제공하는 일부 테스트 유틸리티가 포함되어 있습니다. 또는 Airbnb에서 출시한 Enzyme 패키지를 사용할 수도 있습니다. Enzyme은 React 구성 요소의 출력을 주장, 조작 및 반복하기 쉽기 때문에 ReactTestUtils보다 훨씬 낫습니다. React utils를 사용하여 테스트를 시작한 다음 Enzyme으로 전환하겠습니다.

Enzyme을 설치하려면 다음 명령을 실행하세요.

으아아아

src/SetupTests.js에 코드를 추가하세요.

으아아아

create-react-app 페이지의 테스트 구성 요소 섹션에서 자세한 정보를 확인할 수 있습니다.

데모 애플리케이션 설정 및 테스트 구성

제품 목록의 마스터/세부 정보 보기를 표시하는 간단한 데모 애플리케이션에 대한 테스트를 작성하겠습니다. GitHub 저장소에서 데모 애플리케이션을 찾을 수 있습니다. 애플리케이션은 ProductContainer라는 컨테이너 구성 요소와 세 가지 프레젠테이션 구성 요소(ProductList, ProductContainer 的容器组件和三个表示组件组成：ProductList、ProductDetails 和 ProductHeader

)로 구성됩니다. ProductDetails 및 ProductHeader.

디렉토리 구조

으아아아

이 데모는 단위 테스트 및 기능 테스트에 적합합니다. 각 구성 요소를 개별적으로 테스트하거나 전체 제품 목록 기능을 테스트할 수 있습니다.

데모를 다운로드한 후 /src/comComponents/ 안에 __tests__强> 이라는 디렉터리를 만듭니다. 그런 다음 이 기능과 관련된 모든 테스트 파일을 __tests__ 디렉터리에 저장할 수 있습니다. 테스터는 일반적으로 테스트 파일 이름을 .spec.js 또는 .test.js로 지정합니다(예: ProductHeader.test.js 또는 >ProductHeader.spec.js

).

React에서 기본 테스트 작성

아직 만들지 않았다면 ProductHeader.test.js

파일을 만듭니다. 우리의 테스트는 기본적으로 다음과 같습니다:

src/comComponents/__tests__/ProductList.test.js

으아아아 describe 块开始，这是一个接受两个参数的全局 Jest 函数。第一个参数是测试套件的标题，第二个参数是实际的实现。测试套件中的每个 it()테스트 스위트는 테스트 또는 사양에 해당하는

로 시작됩니다. 테스트에는 코드 상태를 확인하는 하나 이상의 기대치가 포함됩니다.

으아아아

Jest에서 기대는 참 또는 거짓을 반환하는 주장입니다. 사양의 모든 주장이 참일 때 사양이 통과되었다고 합니다. 그렇지 않으면 테스트가 실패합니다.

예를 들어 우리는 두 가지 테스트 사양을 만들었습니다. 첫 번째는 당연히 통과해야 하고 두 번째는 실패해야 합니다.

toBeTruthy()참고:

는 사전 정의된 일치자입니다. Jest에서 각 매처는 예상 값을 실제 값과 비교하고 부울 값을 반환합니다. 더 많은 matcher를 사용할 수 있으며 이에 대해서는 나중에 다루겠습니다.

테스트 스위트 실행

create-react-app에는 테스트 스위트 설정을 실행하는 데 필요한 모든 것이 있습니다. 다음 명령을 실행하기만 하면 됩니다:

으아아아

다음과 같은 내용이 표시됩니다.

toBeTruthy() 匹配器替换为toBeFalsy()실패한 테스트를 통과하려면

matcher를

로 바꿔야 합니다.

으아아아

바로 그거야!

Jest에서 매처 사용하기

앞서 언급했듯이 Jest는 일치자를 사용하여 값을 비교합니다. 이를 사용하여 동등성을 확인하고, 두 숫자 또는 문자열을 비교하고, 표현식의 진실성을 확인할 수 있습니다. 다음은 Jest에서 사용할 수 있는 인기 있는 matcher 목록입니다.
• toBe();
• toBeNull()
• toBeDefined()
• toBeUndefine()
• toBeTruthy()
• toBeFalsy()
• toBeGreaterThan()

• toBeLesserThan()
• toMatch()
• toContain()

그냥 맛이에요. 참조 문서에서 사용 가능한 모든 일치자를 찾을 수 있습니다.

React 구성 요소 테스트ProductHeader 먼저 구성요소에 대한 몇 가지 테스트를 작성하겠습니다.

ProductHeader.js 파일

이 아직 열려 있지 않으면 엽니다.

src/comComponents/ProductHeader.js

으아아아

여기서 함수 구성 요소 대신 클래스 구성 요소를 사용하는 이유가 궁금하세요? 그 이유는 ReactTestUtils를 사용하여 기능적 구성 요소를 테스트하기가 어렵기 때문입니다. 이유가 궁금하다면 이 스택 오버플로 토론에 답이 있습니다.

🎜다음 가정을 사용하여 테스트를 작성할 수 있습니다. 🎜

1. 该组件应呈现 h2 标记。
2. h2 标记应该有一个名为 title 的类。

为了渲染组件并检索相关的 DOM 节点，我们需要 ReactTestUtils。删除虚拟规格并添加以下代码：

src/components/__tests__/ProductHeader.test.js

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; 
import ProductsList from '../ProductsList';

describe('ProductHeader Component', () => {

    it('has an h2 tag', () => {
     //Test here
    });
  
    it('is wrapped inside a title class', () => {
     //Test here
    })
  })

要检查 h2 节点是否存在，我们首先需要将 React 元素渲染到文档中的 DOM 节点中。您可以借助 ReactTestUtils 导出的一些 API 来完成此操作。例如，要渲染我们的 <ProductHeader/> 组件，您可以执行以下操作：

 const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    

然后，您可以借助 findRenderedDOMComponentWithTag('tag-name') 从组件中提取 h2 标签。它检查所有子节点并找到与 tag-name 匹配的节点。

这是整个测试规范。

    it('has an h2 tag', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var h2 = ReactTestUtils.findRenderedDOMComponentWithTag(
       component, 'h2'
     );
    
  });

尝试保存它，您的测试运行程序应该向您显示测试已通过。这有点令人惊讶，因为我们没有像前面的示例中那样的 expect() 语句。 ReactTestUtils 导出的大多数方法都内置了期望。在这种特殊情况下，如果测试实用程序无法找到 h2 标记，它将抛出错误并且测试将自动失败。

现在，尝试为第二个测试创建代码。您可以使用 findRenderedDOMcomponentWithClass() 来检查是否有任何带有“title”类的节点。

    it('has a title class', () => {

      const component = ReactTestUtils.renderIntoDocument(<ProductHeader/>);    
      var node = ReactTestUtils.findRenderedDOMComponentWithClass(
       component, 'title'
     );
    })

就是这样！如果一切顺利，您应该会看到绿色的结果。

结论

虽然我们刚刚编写了两个测试规范，但我们已经在此过程中涵盖了很多基础知识。在下一篇文章中，我们将为我们的产品列表页面编写一些完整的测试。我们还将用 Enzyme 替换 ReactTestUtils。为什么？ Enzyme 提供了一个非常易于使用且对开发人员友好的高级界面。请继续关注第二部分！

如果您在任何时候感到困难或需要帮助，请在评论中告诉我们。

위 내용은 기본 튜토리얼: Jest로 React 컴포넌트 테스트하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!