Jest를 훨씬 더 빠르게 실행하도록 합시다.-JS 튜토리얼-php.cn

Let’s Make Jest Run Much Faster

하지만 먼저 왜 그렇게 느린지 이해해야 합니다.

실제 사례

간단한 React 구성요소를 생각해 보세요.

import React from "react";
import { deepClone } from "./utils";

export function App() {
  const obj = { foo: 'bar' };

  return (
    <div>
      <p>Object looks like this: {JSON.stringify(deepClone(obj))}</p>
    </div>
  );
}

로그인 후 복사

앱 구성요소는 하나의 유틸리티 기능인 - deepClone에만 의존합니다. utils 파일은 다음과 같습니다.

import _ from 'lodash';
import moment from 'moment';
import * as mui from '@mui/material';

export const deepClone = (obj) => _.cloneDeep(obj);
export const getFormattedDate = (date) => moment(date).format('YYYY-MM-DD');

export const isButton = (instance) => instance === mui.Button;

로그인 후 복사

세 개의 한 줄 도우미 기능을 내보냅니다. 바로 그거예요.
이제 중요한 질문이 있습니다. 이 테스트를 실행하는 데 시간이 얼마나 걸릴 것이라고 생각하시나요?

import React from "react";
import { render, screen } from "@testing-library/react";
import { App } from "./app";
import "@testing-library/jest-dom";

test("renders the app", () => {
  render(<App />);
});

로그인 후 복사

답은? 영원!

 PASS  src/tests/react-app/react-app.test.js
  √ renders the date and sum correctly (25 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        5.045 s

로그인 후 복사

내 컴퓨터에서 한 줄짜리 React 구성 요소에 대한 한 줄짜리 테스트 사례를 실행하는 데 5초가 걸렸습니다.

성능 분석

뒤에서 일어나는 일을 분석하려면 Chrome의 프로파일러 - Kent C. Dodds의 통찰력 있는 동영상을 시청하는 것이 좋습니다.
또는 프로파일링 프로세스를 단순화하는 jest-neat-runner 라이브러리를 사용할 수 있습니다. NEAT_REPORT_MODULE_LOAD_ABOVE_MS 옵션을 150으로 설정하고 NEAT_REPORT_TRANSFORM을 활성화합니다. 이 구성은 로드하는 데 150ms 이상 걸리는 모듈을 인쇄하고 파일을 처리(열기 및 트랜스파일)하는 데 걸린 시간에 대한 정보를 제공합니다.

후자를 이용해보자. 출력물입니다.

> jest src/tests/react-app/

From src\tests\react-app\utils.js -> @mui/material in 1759ms
From node_modules\@mui\material\node\styles\adaptV4Theme.js -> @mui/system in 509ms
From src\tests\react-app\react-app.test.js -> @testing-library/react in 317ms
From node_modules\@testing-library\react\dist\pure.js -> @testing-library/dom in 266ms
From node_modules\@mui\system\ThemeProvider\ThemeProvider.js -> @mui/private-theming in 166ms
From node_modules\@testing-library\dom\dist\role-helpers.js -> aria-query in 161ms

로그인 후 복사

"@mui/material" 라이브러리를 사용하지도 않고 거의 2초 동안 로드하고 있습니다!

많은 프로젝트의 근본 원인은 무엇입니까?

지저분한 종속성

내 경험상 jest의 성능 문제는 주로 런타임에도 사용되지 않는 전이적 종속성이 너무 많아서 발생합니다. 위의 예에서 볼 수 있듯이 애플리케이션으로 가져올 파일에 충분한 주의를 기울이지 않으면 나와 같은 상황이 발생할 수 있습니다.

저의 경우 App 구성 요소는 deepClone 유틸리티 기능에만 의존합니다. 그러나 deepClone은 utils 파일에서 내보내지기 때문에 utils 파일 내의 모든 종속 항목도 함께 로드됩니다.

느슨하게 관련된 기능과 과도한 종속성을 많이 포함하는 파일은 애플리케이션과 테스트 속도를 크게 저하시킬 수 있습니다.

배럴 파일

Jest는 ESM 모듈과 친구가 아니므로 CommonJS로 대체됩니다. 결과적으로 트리 쉐이킹이 올바르게 작동하지 않습니다. 이는 배럴 파일(인덱스 파일)에서 가져온 모듈에 의존할 때 특히 문제가 됩니다.
예를 들어, 배럴 파일에서 작은 구성 요소나 기능을 가져오면 Jest는 다른 모든 것도 로드합니다. 이는 분명히 불필요한 오버헤드를 발생시킵니다.

지금은 무엇입니까?

가져오기 전략을 수동으로 조정

배럴 파일을 제거하고 수많은 종속성이 있는 파일을 더 작고 집중된 모듈로 분할하여 전체 코드베이스를 리팩토링하는 것 외에도. 로드하는 데 시간이 오래 걸리는 모듈을 식별하고 더 작은 대체 모듈을 찾거나 가져온 모듈이 배럴 파일을 사용하는 대신 개별 부품을 개별적으로 내보내는지(예: 명명된 가져오기) 확인할 수 있습니다.

대신에 의미

import React from "react";
import { deepClone } from "./utils";

export function App() {
  const obj = { foo: 'bar' };

  return (
    <div>
      <p>Object looks like this: {JSON.stringify(deepClone(obj))}</p>
    </div>
  );
}

로그인 후 복사

하세요

import _ from 'lodash';
import moment from 'moment';
import * as mui from '@mui/material';

export const deepClone = (obj) => _.cloneDeep(obj);
export const getFormattedDate = (date) => moment(date).format('YYYY-MM-DD');

export const isButton = (instance) => instance === mui.Button;

로그인 후 복사

모듈을 전혀 사용하지 않는 경우 jest.mock을 통해 모의 처리하여 완전히 로드되는 것을 방지할 수 있습니다.
그러나 이러한 조정에는 상당한 시간이 소요될 수 있습니다.

런타임 캐시 접근 방식

더 효과적인 방법은 NEAT_RUNTIME_CACHE 옵션과 함께 jest-neat-runner 라이브러리를 사용하는 것입니다. 이 옵션이 켜져 있으면 라이브러리는 모든 모듈(테스트 파일당)의 실제 런타임 사용량을 추적하고 후속 테스트 실행에 필요하지 않은 종속성을 캐시에 저장합니다. 위의 예에서 이것이 무엇을 하는지 보여드리겠습니다

import React from "react";
import { render, screen } from "@testing-library/react";
import { App } from "./app";
import "@testing-library/jest-dom";

test("renders the app", () => {
  render(<App />);
});

로그인 후 복사

MUI 라이브러리를 포함해 불필요한 26개의 라이브러리 로딩을 건너뛰어 실행 시간을 5초에서 2초로 줄였습니다.
주의하세요 - NEAT_RUNTIME_CACHE 사용 시 몇 가지 주의사항이 있으므로 사용하기 전에 반드시 README를 읽어보세요.

기타 최적화 기술

변환 최적화: 얼마나 많은 파일을 변환해야 하는지 검토하고 가장 효과적인 트랜스파일러(예: SWC 또는 esbuild)를 사용하세요. 시간을 절약하고 싶다면 jest-neat-runner의 NEAT_REPORT_TRANSFORM 옵션을 사용하면 트랜스파일하는 데 걸리는 시간과 모듈 수에 대한 자세한 정보를 얻을 수 있습니다.

메모리에 모듈 캐싱: 기본적으로 Jest는 메모리에 모듈을 캐시하지 않습니다. 즉, 모든 테스트 실행은 모듈을 열고, 구문 분석하고, 메모리에 로드해야 합니다. 광범위한 테스트 제품군과 충분한 메모리가 있는 경우 NEAT_TRANSFORM_CACHE 옵션을 사용하여 작업 속도를 높이는 것이 좋습니다.

CI 파이프라인은 어떻습니까?

병렬 실행: CircleCI 및 GitHub Actions는 병렬 실행을 지원합니다. 즉, Jest의 샤드 매개변수를 사용하여 더 많은 머신을 가동하고 부하를 나눌 수 있습니다.
Jest 및 Neat 캐시 저장: 이는 CI에서 Jest 및 jest-neat-runner를 활용하는 데 중요합니다. Jest에서 cacheDirectory 옵션을 설정하세요. 그런 다음 테스트 실행 후 디렉터리를 저장하고 테스트를 실행하기 전에 캐시를 복원합니다. 주의 사항: 병렬 처리를 사용하는 경우 각 노드에 대해 고유한 캐시를 저장해야 합니다. 예를 들어 CircleCI는 캐시를 저장할 때 활용할 수 있는 CIRCLE_NODE_INDEX 환경 변수를 노출합니다. CircleCI에서는 이렇게 보입니다.

import React from "react";
import { deepClone } from "./utils";

export function App() {
  const obj = { foo: 'bar' };

  return (
    <div>
      <p>Object looks like this: {JSON.stringify(deepClone(obj))}</p>
    </div>
  );
}

로그인 후 복사

이러한 지침을 따르면 프로젝트에서 Jest의 성능을 크게 향상시킬 수 있습니다.

위 내용은 Jest를 훨씬 더 빠르게 실행하도록 합시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!