Oracle JET 가상 DOM 앱에 단위 테스트 추가

소개

테스트는 개발 수명 주기의 중요한 부분으로, 강력하고 안정적인 웹 앱의 생성을 보장합니다. 엔드투엔드 테스트 및 통합 테스트와 같은 다양한 유형의 테스트가 있습니다. 단위 테스트에는 클래스, 함수 또는 메소드를 포함하여 개별 코드 단위에 대한 테스트 작성이 포함됩니다. 개발 과정 초기에 단위 테스트를 작성하는 것이 좋습니다. 초기에 시작하면 테스트의 중요성을 보여줄 뿐만 아니라 웹 앱이 완전히 작동하고 복잡해질 때까지 기다리는 대신 전체 테스트 범위를 달성할 가능성을 높입니다.

목표

이 자습서에서는 Oracle JET CLI add testing 명령을 사용하여 테스트 도구를 설치하는 방법과 Oracle JET 가상 DOM 앱에서 단위 테스트를 작성하고 실행하는 방법을 배웁니다.

add testing 명령은 Jest 및 Preact Testing Library를 설치하며 앱 package.json 파일의 scripts 섹션을 작성한 단위 테스트를 실행하는 명령으로 업데이트하는 것 외에도 이들 라이브러리를 설치합니다.

주: Jest를 사용하여 앱의 Oracle JET UI 구성 요소를 테스트하거나 상호 작용하지 마십시오. Oracle JET 팀은 구성 요소 개발 프로세스의 일부로 이러한 구성 요소를 광범위하게 테스트했습니다. 대신 Jest를 사용하여 앱에서 작성한 코드에 대한 단위 테스트를 작성합니다. 개발 중인 Oracle JET 가상 DOM 앱의 자동 UI 테스트를 수행하려면 Oracle JET 구성요소 WebElements UI 자동화 라이브러리(@oracle/oraclejet-webdriver)를 사용합니다. 셀레늄 WebDriver 위에 구축된 이 라이브러리는 JET 구성 요소와 함께 작동하도록 설계되었습니다. 시작하려면 Oracle JET 웹 앱에 대한 UI 자동화 테스트를 생성하는 환경 설정을 참조하십시오.

필수 조건

작업 1: 테스트 라이브러리 추가

  1. JET-Virtual-DOM-app 폴더로 이동하여 테스트 라이브러리를 추가합니다.

    npx ojet add testing

    Oracle JET 툴링은 테스트 라이브러리에 필요한 구성 파일을 사용하여 JET-Virtual-DOM-app 폴더에 test-config 폴더를 생성합니다.

    ./JET-Virtual-DOM-app/test-config
jest.config.js
testSetup.ts

    또한 add testing 명령이 설치하는 테스트 도구로 package.json 파일을 업데이트합니다. 이러한 업데이트에는 Jest 및 Preact Testing Library에 대한 항목이 포함됩니다.

    . . .
 "devDependencies": {
   . . .
   "@oracle/oraclejet-jest-preset": "16.0.11",
   "@testing-library/preact": "3.2.3",
   "@types/jest": "29.5.3",
   . . .
   "jest": "29.6.2",
   "jest-environment-jsdom": "29.6.2",
   . . .
},

    마지막으로, 테스트 라이브러리를 호출하는 명령으로 package.json 파일의 scripts 섹션을 업데이트합니다.

    . . .
"scripts": {
 . . .
  "test": "jest -c test-config/jest.config.js",
  "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
 },

작업 2: 단위 테스트 작성

  1. JET-Virtual-DOM-app/src/components/content 폴더로 이동하여 __tests__이라는 새 폴더를 생성합니다.

  2. 새로 생성된 JET-Virtual-DOM-app/src/components/content/__tests__ 폴더에 content.spec.tsx라는 테스트 스크립트 파일을 생성합니다.

  3. content.spec.tsx 파일에서 JET-Virtual-DOM-app/src/components/content 파일에 Product Information 문자열이 있는지 테스트하는 항목을 작성합니다. 또한 테스트에서는 이 문자열을 H1 요소 태그로 묶어야 합니다.

    import { h } from "preact";
import { render } from "@testing-library/preact";
import { Content } from "../index";

test("renders Product Information header with a h1 heading", () => {
   const { getByText } = render(<Content />);
   const headerElement = getByText("Product Information");
   expect(headerElement.tagName).toBe("H1");
});

    또한 완료된 content.spec.tsx 테스트 스크립트 파일은 jest.mock 호출을 사용하여 콘텐츠 구성요소의 인스턴스에 필요한 임포트(store_data.json 및 ojs/ojmutablearraydataprovider)에 대한 액세스 권한을 제공합니다. 이러한 jest.mock 호출을 테스트 스크립트 파일에 포함시키려면 content-spec-tsx.txt를 참조하십시오.

작업 3: 단위 테스트 실행

터미널 window에서 JET-Virtual-DOM-app 디렉토리로 이동하고 다음 명령을 실행하여 JET-Virtual-DOM-app/src/components/content/__tests__ 폴더에서 unit test를 실행합니다.

   npm test

테스트가 실행되고 다음과 유사한 콘솔 출력이 표시됩니다.

   $ npm test

   > JET-Virtual-DOM-app@1.0.0 test
   > jest -c test-config/jest.config.js

   PASS  src/components/content/__tests__/content.spec.tsx
   Test suite for Content component
      √ Renders Product Information header with a H1 tag (14 ms)

   Test Suites: 1 passed, 1 total
   Tests:       1 passed, 1 total
   Snapshots:   0 total
   Time:        2.145 s
   Ran all test suites.

다음단계

이 모듈의 다음 자습서로 이동합니다.

이 자습서는 첫 번째 Oracle JET 가상 DOM 앱 모듈의 일부입니다.

가상 DOM 학습 경로의 기본 페이지로 돌아가 가상 DOM 앱 구축 시 모든 모듈에 액세스할 수 있습니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 랩을 탐색하거나 Oracle Learning YouTube 채널에서 더 많은 무료 학습 콘텐츠에 액세스하세요. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer가 되십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.