컨텐츠로 건너뛰기

테스팅

테스팅은 제대로 작동하는 Astro 코드를 작성하고 유지하는 데 도움이 됩니다. Astro는 널리 사용되는 많은 단위 테스트, 컴포넌트 테스트, end-to-end 테스트 도구를 지원합니다. 여기에는 Jest, Mocha, Jasmine, Cypress, Playwright가 포함됩니다. 또한 여러분이 사용하는 UI 프레임워크 컴포넌트를 테스트하기 위해 React Testing Library와 같은 특정 프레임워크에 종속된 테스팅 라이브러리를 설치할 수도 있습니다.

테스팅 프레임워크를 사용해 특정 상황에서의 코드의 동작에 대한 assertions 또는 expectations를 기술하여 현재 코드의 실제 동작과 비교할 수 있습니다.

단위 및 통합 테스트

섹션 제목: 단위 및 통합 테스트

Vitest

섹션 제목: Vitest

esbuild로 동작하며 ESM, TypeScript, JSX를 지원하는 Vite-native 단위 테스팅 프레임워크입니다.

다음과 같이 vitest.config.ts 구성 파일에서 Astro의 getViteConfig() 도우미를 사용하세요. 이를 통해 Astro 프로젝트에서 Vitest를 사용할 수 있습니다.

vitest.config.ts
/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';


export default getViteConfig({
  test: {
    // Vitest 구성 옵션
  },
});

기본적으로 getViteConfig()는 프로젝트 Astro 구성 파일을 로드하고 이를 테스트 환경에 적용하려고 시도합니다. Astro 4.8 버전에서는 테스트에 적용된 Astro 구성을 사용자 정의해야 하기 위해 getViteConfig()에 두 번째 인수를 전달해야 합니다.

export default getViteConfig(
  { test: { /* Vitest 구성 옵션 */ } },
  {
    site: 'https://example.com/',
    trailingSlash: 'always',
  },
);

GitHub에서 Astro + Vitest 시작 템플릿을 확인하세요.

Vitest 및 컨테이너 API

섹션 제목: Vitest 및 컨테이너 API

Added in: astro@4.9.0

컨테이너 API를 사용하여 Astro 컴포넌트를 테스트할 수 있습니다. 먼저, 위에 설명된 대로 vitest를 설정한 다음 .test.js 파일을 생성하여 컴포넌트를 테스트하세요.

example.test.js
import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';


test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Card content',
    },
  });


  expect(result).toContain('This is a card');
  expect(result).toContain('Card content');
});

End-to-end 테스트

섹션 제목: End-to-end 테스트

Playwright

섹션 제목: Playwright

Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입니다. JavaScript 또는 TypeScript에서 Playwright API를 사용하여 Chromium, WebKit, Firefox를 포함한 모든 최신 렌더링 엔진에서 Astro 코드를 테스트하세요.

설치

섹션 제목: 설치

VS Code 확장을 사용하여 테스트를 시작하고 실행할 수 있습니다.

또는 원하는 패키지 관리자를 사용하여 Astro 프로젝트에 Playwright를 설치할 수 있습니다. CLI 단계에 따라 JavaScript/TypeScript를 선택하고, 테스트 폴더 이름을 지정하고, 선택적으로 GitHub Actions 워크플로를 추가하세요.

Terminal window
npm init playwright@latest

첫 Playwright 테스트 생성

섹션 제목: 첫 Playwright 테스트 생성

  1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 index.astro 페이지를 테스트합니다.

    src/pages/index.astro
    ---
    ---
    <html lang="ko">
      <head>
        <title>Astro는 놀랍습니다!</title>
        <meta
          name="description"
          content="Astro의 차세대 아일랜드 아키텍처를 통해 어디에서나 콘텐츠를 가져와 빠르게 제공할 수 있습니다."
        />
      </head>
      <body></body>
    </html>

  2. 새 src/test/ 디렉터리를 생성하고 다음 테스트 파일을 추가하세요. 페이지의 메타 정보가 정확한지 확인하기 위해 다음 테스트 코드를 복사하여 테스트 파일에서 사용하세요. 테스트 중인 페이지와 일치하도록 페이지의 <title>의 값을 업데이트하세요.

    src/test/index.spec.ts
    import { test, expect } from '@playwright/test';
    

    test('meta is correct', async ({ page }) => {
      await page.goto('http://localhost:4321/');
    

      await expect(page).toHaveTitle('Astro는 놀랍습니다!');
    });

Playwright 테스트 실행

섹션 제목: Playwright 테스트 실행

단일 테스트 및 여러 테스트를 한번에 실행할 수 있으며, 단일 브라우저 또는 여러 브라우저에서 테스트 할 수도 있습니다. 기본적으로 테스트 결과는 터미널에 표시됩니다. 선택적으로 HTML Test Reporter를 실행하여 전체 보고서를 확인하고 테스트 결과를 필터링할 수도 있습니다.

  1. 명령줄을 사용하여 이전 예시 코드를 테스트하려면 test 명령을 사용하세요. 하나의 파일에 대해 테스트하기 위해 파일 이름을 포함시킬 수도 있습니다.

    Terminal window
    npx playwright test index.spec.ts

  2. 다음 명령을 사용하여 전체 HTML 테스트 보고서를 열어 확인할 수 있습니다.

    Terminal window
    npx playwright show-report
고급: 테스트 중 개발 웹 서버 시작
섹션 제목: 고급: 테스트 중 개발 웹 서버 시작

또한, Playwright 구성 파일의 webServer 옵션을 사용하여 테스트 스크립트가 실행될 때 Playwright가 웹 서버를 시작하도록 설정할 수도 있습니다.

다음은 npm을 사용할 때 필요한 구성 및 명령의 예입니다.

  1. 프로젝트의 package.json 파일에 "test:e2e": "playwright test"와 같은 테스트 스크립트를 추가합니다.

  2. playwright.config.ts에서 webServer 객체를 추가하고 command 속성의 값을 npm run preview로 업데이트합니다.

    playwright.config.ts
    import { defineConfig } from '@playwright/test';
    

    export default defineConfig({
      webServer: {
        command: 'npm run preview',
        url: 'http://localhost:4321/',
        timeout: 120 * 1000,
        reuseExistingServer: !process.env.CI,
      },
      use: {
        baseURL: 'http://localhost:4321/',
      },
    });

  3. npm run build를 실행한 다음 npm run test:e2e를 실행하여 Playwright 테스트를 시작합니다.

Playwright에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다.

Cypress

섹션 제목: Cypress

Cypress는 최신 웹을 위해 제작된 프런트엔드 테스팅 도구입니다. Cypress를 사용하면 Astro 사이트에 대해 end-to-end 테스트를 시작할 수 있습니다.

설치

섹션 제목: 설치

원하는 패키지 관리자를 사용하여 Cypress를 설치할 수 있습니다.

Terminal window
npm install -D cypress

Cypress가 프로젝트의 개발 종속성으로 로컬에 설치됩니다.

구성

섹션 제목: 구성

프로젝트의 루트 디렉터리에 다음 내용이 포함된 cypress.config.js 파일을 생성합니다.

cypress.config.js
import { defineConfig } from 'cypress';


export default defineConfig({
  e2e: {
    supportFile: false,
  },
});

첫 Cypress 테스트 생성

섹션 제목: 첫 Cypress 테스트 생성

  1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 index.astro 페이지를 테스트합니다.

    src/pages/index.astro
    ---
    ---
    <html lang="ko">
      <head>
        <title>Astro는 놀랍습니다!</title>
        <meta
          name="description"
          content="Astro의 차세대 아일랜드 아키텍처를 통해 어디에서나 콘텐츠를 가져와 빠르게 제공할 수 있습니다."
        />
      </head>
      <body>
        <h1>안녕하세요</h1>
      </body>
    </html>

  2. cypress/e2e 디렉터리에 index.cy.js 파일을 생성합니다. 생성한 파일에서 다음 테스트 코드를 사용하여 페이지 제목과 헤더가 올바른지 확인하세요.

    cypress/e2e/index.cy.js
    it('제목이 일치합니다.', () => {
      const page = cy.visit('http://localhost:4321');
    

      page.get('title').should('have.text', 'Astro는 놀랍습니다!');
      page.get('h1').should('have.text', '안녕하세요');
    });

Cypress 테스트 실행

섹션 제목: Cypress 테스트 실행

명령 줄이나 Cypress 앱에서 Cypress를 실행할 수 있습니다. Cypress 앱은 테스팅 및 디버깅을 위한 시각적 인터페이스를 제공합니다.

먼저 Cypress가 현재 사이트에 접근할 수 있도록 개발 서버를 시작합니다.

명령줄을 사용하여 이전 예시 코드를 테스트하려면 다음 명령을 실행합니다.

Terminal window
npx cypress run

또는 Cypress 앱을 사용하여 테스트하기 위해 다음 명령을 실행합니다.

Terminal window
npx cypress open

Cypress 앱이 시작되면 E2E Testing을 선택하고 테스트에 사용할 브라우저를 선택합니다.

모든 테스트에 통과했다면 테스트 완료 후 초록색 체크 표시가 출력됩니다.

Output from npx cypress run
Running:  index.cy.js                                                                     (1 of 1)


✓ titles are correct (107ms)


1 passing (1s)

다음 단계

섹션 제목: 다음 단계

Cypress에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다.

NightwatchJS

섹션 제목: NightwatchJS

Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브라우저는 물론 기본 모바일 애플리케이션에 대한 기본 지원을 통해 웹 전체에서 테스트를 작성, 실행, 디버깅할 수 있는 강력한 도구 세트를 갖춘 테스트 자동화 프레임워크입니다.

설치

섹션 제목: 설치

선택한 패키지 관리자를 사용하여 Astro 프로젝트에 NightwatchJS를 설치할 수 있습니다. CLI 단계에 따라 JavaScript/TypeScript를 선택하고, 테스트 폴더 이름을 지정하고, 컴포넌트 테스트와 모바일 브라우저 테스트를 포함할지 여부를 선택하세요.

Terminal window
npm init nightwatch@latest

첫 번째 Nightwatch 테스트 만들기

섹션 제목: 첫 번째 Nightwatch 테스트 만들기

  1. 테스트할 페이지를 선택하세요. 이 예시에서는 아래의 index.astro 페이지를 테스트합니다.

    src/pages/index.astro
    ---
    ---
    <html lang="en">
      <head>
        <title>Astro is awesome!</title>
        <meta name="description" content="Pull content from anywhere and serve it fast with Astro's next-gen island architecture." />
      </head>
      <body></body>
    </html>

  2. 새 폴더 src/test/를 만들고 다음 테스트 파일을 추가합니다.

    src/test/index.js
    describe('Astro testing with Nightwatch', function () {
        before(browser => browser.navigateTo('http://localhost:4321/'));
    

        it("check that the title is correct", function (browser) {
            browser.assert.titleEquals('Astro is awesome!')
        });
    

        after(browser => browser.end());
    });

NightwatchJS 테스트 실행

섹션 제목: NightwatchJS 테스트 실행

단일 테스트 또는 여러 테스트를 한 번에 실행하여 하나 또는 여러 브라우저를 테스트할 수 있습니다. 기본적으로 테스트 결과는 터미널에 표시됩니다. 선택적으로 HTML Test Reporter를 열어 전체 보고서를 표시하고 테스트 결과를 필터링할 수 있습니다.

NightwatchJS VSCode 확장을 사용하거나 아래 CLI 단계를 사용하여 테스트를 실행할 수 있습니다.

  1. 모든 테스트를 실행하려면 터미널에 다음 명령을 입력합니다. 선택적으로 단일 테스트만 실행하려면 파일 이름을 포함합니다.

    Terminal window
    npx nightwatch test/index.js

  2. 전체 HTML 테스트 보고서를 보려면 다음 명령을 사용합니다.

    Terminal window
    npx nightwatch test/index.ts --open

  3. 특정 브라우저에 대해 테스트를 실행하려면 --environment 또는 -e CLI 인수를 사용하세요. 관련 브라우저가 설치되어 있지 않은 경우 Nightwatch는 Selenium Manager를 사용하여 설정을 시도합니다.

    Terminal window
    npx nightwatch test/index.ts -e firefox

NightwatchJS에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다.