Jest 30으로 마이그레이션

원문 보기 위키 갱신 2026.10.07

Jest 30으로 마이그레이션 (Migrating to Jest 30)

최근 버전의 @backstage/cli부터 jest는 peer 의존성입니다. Backstage CLI를 사용해 테스트를 실행한다면 Jest와 해당 환경 의존성을 프로젝트의 devDependencies로 추가해야 합니다.

출처: 문서

본문

Jest 29 또는 Jest 30 중 하나를 설치할 수 있습니다. 이 변경 전 내장 Jest 버전은 Jest 29였지만, Jest 30으로 전환할 것을 권장합니다. 업그레이드하면 Could not parse CSS stylesheet 오류가 해결되고, 웹 패키지에서 MSW v2를 사용할 수 있으며, 향후 Backstage CLI 버전과 호환되도록 유지할 수 있습니다. Jest 29 지원은 임시적이며, 원하는 속도로 업그레이드할 수 있도록 하기 위한 것이지만 결국 제거될 것입니다.

Jest 29:

# in your repository root, run:yarn add --dev jest@^29 @types/jest@^29 jest-environment-jsdom@^29

장점: 마이그레이션 불필요

단점: @backstage/ui나 CSS @layer 선언을 사용하는 다른 패키지의 구성 요소를 테스트할 때 Could not parse CSS stylesheet 경고/오류가 보일 수 있음

Jest 30:

# in your repository root, run:yarn add --dev jest@^30 @types/jest@^30 @jest/environment-jsdom-abstract@^30 jsdom@^27

장점: 스타일시트 구문 분석 경고/오류 수정

단점: 테스트에 마이그레이션 단계(아래 참조) 필요

마이그레이션 가이드 (Migration Guide)

아래 예시는 Backstage 저장소를 마이그레이션할 때 우리가 겪은 문제입니다. 파괴적 변경의 전체 목록은 공식 문서를 참조하세요.

Jest 30 upgrade guide
JSDOM changelog

Jest 30

배열과 함께하는 비대칭 매처: expect.objectContaining()이 더 이상 배열과 작동하지 않습니다.

- expect(result).toEqual(expect.objectContaining([{ id: '123' }]));+ expect(result).toEqual([{ id: '123' }]);// or+ expect(result).toEqual(expect.arrayContaining([{ id: '123' }]));

배열 길이 단언: expect.objectContaining({ length: N })이 더 이상 작동하지 않습니다.

- expect(fn).toHaveBeenCalledWith(expect.objectContaining({ length: 2 }));+ expect(fn).toHaveBeenCalledWith(expect.any(Array));+ expect(fn.mock.calls[0][0]).toHaveLength(2);

폐기된 매처 별칭 제거: 정식 이름으로 대체합니다.

- expect(fn).toBeCalled();+ expect(fn).toHaveBeenCalled();

스냅샷: 헤더 형식이 변경되었으므로 스냅샷을 다시 생성합니다.

yarn test --no-watch -u

JSDOM 27

window.location은 구성할 수 없음: 더 이상 Object.defineProperty로 location을 모킹할 수 없습니다.

- Object.defineProperty(window, 'location', { value: { href: '' } });+ // Option 1: Use history API+ history.replaceState({}, '', '/new-path');+ // Option 2: Spy on navigation methods+ const spy = jest.spyOn(component, 'navigate');

CSS 색상 값: 색상이 명명된 색 대신 RGB로 반환될 수 있습니다.

- expect(element.style.color).toBe('red');+ expect(element.style.color).toBe('rgb(255, 0, 0)');

오류 형식 변경: 오류 메시지와 스택 추적의 형식이 다를 수 있습니다.

`Cannot read properties of null (reading 'constructor')`가 발생한다면

특정 Backstage UI 구성 요소(예: Button)는 이 오류를 테스트에서 트리거하는 CSS 조합을 가집니다. 해결 방법은 @acemir/cssom을 최소 v0.9.25로 지정하는 것입니다.

Jest 30으로 마이그레이션