Skip to content

Latest commit

 

History

History
420 lines (311 loc) · 15.7 KB

testing.mdx

File metadata and controls

420 lines (311 loc) · 15.7 KB
Raw
title description i18nReady
테스팅
Astro의 테스팅에 대한 소개
true

import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro'

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

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

단위 및 통합 테스트

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

컨테이너 API를 사용하여 Astro 컴포넌트를 테스트할 수 있습니다. 먼저, 위에 설명된 대로 vitest를 설정한 다음 .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 테스트

Playwright

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

설치

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

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

```shell npm init playwright@latest ``` ```shell pnpm dlx create-playwright ``` ```shell yarn create playwright ```

첫 Playwright 테스트 생성

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

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

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

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

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

    :::tip[baseUrl 설정] page.goto("http://localhost:4321/") 대신 더 편리한 URL인 page.goto("/")를 사용하기 위해 playwright.config.ts 구성 파일에서 "baseURL": "http://localhost:4321"을 설정할 수 있습니다. :::

Playwright 테스트 실행

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

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

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

    npx playwright show-report

:::tip 실제 배포된 사이트와 더욱 유사한 프로덕션 코드를 테스트하세요. :::

고급: 테스트 중 개발 웹 서버 시작

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

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

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

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

    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/',
  },
});

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

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

Cypress

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

설치

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

```shell npm install -D cypress ```

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

pnpm add cypress --save-dev
```shell yarn add cypress --dev ```

구성

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

import { defineConfig } from 'cypress';

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

첫 Cypress 테스트 생성

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

  1. 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', '안녕하세요');
});

    :::tip[baseUrl 설정] cy.visit("http://localhost:4321/") 대신 더 짧은 URL인 cy.visit("/")를 사용하기 위해 cypress.config.js 구성 파일에 "baseUrl": "http://localhost:4321"를 설정할 수 있습니다. :::

Cypress 테스트 실행

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

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

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

npx cypress run

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

npx cypress open

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

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

Running:  index.cy.js                                                                     (1 of 1)

✓ titles are correct (107ms)

1 passing (1s)

:::note[테스트 실패] 테스트가 실제로 작동하는지 확인하려면 index.astro 파일에서 다음 줄을 변경해보세요.

 <body>
   <h1>안녕하세요</h1>
   <h1>반갑습니다</h1>
 </body>

그리고 테스트를 다시 실행하세요. 테스트가 실패했음을 알리는 빨간색 "x" 표시가 출력되어야 합니다. :::

다음 단계

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

NightwatchJS

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

설치

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

```shell npm init nightwatch@latest ``` ```shell pnpm dlx create-nightwatch ``` ```shell yarn create nightwatch ```

첫 번째 Nightwatch 테스트 만들기

1. 테스트할 페이지를 선택하세요. 이 예시에서는 아래의 `index.astro` 페이지를 테스트합니다. 
```html title="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>
```

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

     ```js title="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());
 });
 ```

    :::tip[baseUrl 설정] 더 편리한 URL을 사용하기 위해 browser.navigateTo("http://localhost:4321/") 대신 browser.navigateTo("/")를 사용하도록 nightwatch.conf.js 구성 파일에서 "baseURL": "http://localhost:4321"을 설정할 수 있습니다. :::

NightwatchJS 테스트 실행

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

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

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

    npx nightwatch test/index.js

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

    npx nightwatch test/index.ts --open

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

    npx nightwatch test/index.ts -e firefox

:::tip 실제 배포된 사이트와 더욱 유사하도록 프로덕션 코드에 대해 테스트를 실행하세요. :::

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