005 - 테스팅

원문 보기 위키 갱신 2026.10.07

Backstage 프론트엔드 플러그인 컴포넌트에 테스트를 작성하는 방법을 알아볼게요. 스캐폴딩된 플러그인에는 이미 테스트가 준비되어 있어서, 그 테스트가 어떻게 동작하는지, 어떻게 확장하는지 살펴볼 거예요.

출처: 문서

본문

스캐폴딩된 플러그인에는 테스트가 이미 준비되어 있어요. 이 테스트가 어떻게 동작하는지, 어떻게 확장하는지 함께 살펴볼게요.

단위 테스트

Backstage 프론트엔드 플러그인은 테스트 러너로 Jest, 컴포넌트 렌더링에 React Testing Library, HTTP 요청 가로채기에 MSW(Mock Service Worker)를 사용해요.

TodoList 테스트

plugins/todo/src/components/TodoList/TodoList.test.tsx를 열어볼게요. TodoList 컴포넌트는 표현용(presentational)이라 테스트가 간단해요. 데이터를 넘겨주고 잘 렌더링되는지 확인하면 돼요:

await renderInTestApp(<TodoList todos={todos} />);

expect(screen.getByText('First task')).toBeInTheDocument();

@backstage/frontend-test-utils의 renderInTestApp은 컴포넌트 주변에 최소한의 Backstage 앱 컨텍스트를 구성해서, 컴포넌트가 의존할 수 있는 모든 표준 API를 제공해요.

TodoPage 테스트

plugins/todo/src/components/TodoPage/TodoPage.test.tsx를 열어볼게요. TodoPage 컴포넌트는 백엔드에서 데이터를 가져오기 때문에, 테스트는 MSW로 HTTP 요청을 가로채 테스트 데이터를 반환해요:

const server = setupServer();
registerMswTestHooks(server);

it('renders todos from the backend', async () => {
  server.use(
    http.get('*/api/todo/todos', () =>
      HttpResponse.json({
        items: [{ id: '1', title: 'Mocked task' /* ... */ }],
      }),
    ),
  );

  await renderInTestApp(<TodoPage />);

  expect(await screen.findByText('Mocked task')).toBeInTheDocument();
});

몇 가지 짚고 넘어갈 점이 있어요:

**registerMswTestHooks**는 각 테스트마다 MSW 서버를 설정하고 정리해서, 핸들러가 테스트 사이에 새지 않아요.
**screen.findByText**는 요소가 나타날 때까지 기다리는 프로미스를 반환해요. 명시적인 waitFor 호출 없이도 데이터 가져오기의 비동기 특성을 처리해 주죠.
URL 패턴 */api/todo/todos는 호스트에 관계없이 매칭되어, 테스트가 discovery API가 결정하는 base URL과 무관하게 유지돼요.

테스트는 오류 상황도 다뤄요. 백엔드가 500 상태를 반환하면, 컴포넌트는 오류 패널을 표시하는 대신 예시 todo 항목 렌더링으로 대체해요.

테스트 실행하기

저장소 루트에서:

yarn test plugins/todo

추가 테스트 작성하기

플러그인에 기능을 추가할 때 같은 패턴을 따라가면 돼요:

표현용 컴포넌트는 prop을 넘기고 렌더링된 결과를 검증해요.
데이터를 가져오는 컴포넌트는 MSW로 HTTP 응답을 목킹해요.
비동기 검증에는 waitFor보다 screen.findByText를 선호해요.
성공 경로와 오류 경로를 모두 테스트해요.

통합 테스트

엔드투엔드 검증을 위해 Playwright로 실행 중인 Backstage 인스턴스에 실제 브라우저에서 플러그인을 테스트할 수 있어요. 통합 테스트는 라우팅 문제, CSS 회귀, 전체 API 왕복의 문제처럼 단위 테스트가 잡지 못하는 문제를 발견해요.

todo 페이지의 기본적인 Playwright 테스트는 이렇게 생겼어요:

import { test, expect } from '@playwright/test';

test('todo page shows the todo list', async ({ page }) => {
  await page.goto('/todo');
  await expect(page.getByText('Welcome to todo!')).toBeVisible();
  await expect(page.getByRole('table')).toBeVisible();
});

통합 테스트는 중요한 사용자 흐름에서 가장 가치가 높아요. 대부분의 컴포넌트 수준 검증에는 위에서 설명한 단위 테스트 방식이 설정도 적으면서 피드백이 더 빨라요.

더 알아보기 (Learn more)

골든 패스 - 프론트엔드 플러그인