From 1c479721253459a55e9a1a5ca9edd55f31420d2e Mon Sep 17 00:00:00 2001 From: Junseong Park Date: Fri, 24 May 2024 09:59:29 +0900 Subject: [PATCH] i18n(ko-KR): update `testing.mdx` --- src/content/docs/ko/guides/testing.mdx | 297 ++++++++++++++----------- 1 file changed, 163 insertions(+), 134 deletions(-) diff --git a/src/content/docs/ko/guides/testing.mdx b/src/content/docs/ko/guides/testing.mdx index f2942c6349605..0dcd11e23abc2 100644 --- a/src/content/docs/ko/guides/testing.mdx +++ b/src/content/docs/ko/guides/testing.mdx @@ -5,12 +5,15 @@ i18nReady: 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](https://cypress.io), [Playwright](https://playwright.dev)가 포함됩니다. 또한 여러분이 사용하는 UI 프레임워크 컴포넌트를 테스트하기 위해 React Testing Library와 같은 특정 프레임워크에 종속된 테스팅 라이브러리를 설치할 수도 있습니다. 테스팅 프레임워크를 사용해 특정 상황에서의 코드의 동작에 대한 **assertions** 또는 **expectations**를 기술하여 현재 코드의 실제 동작과 비교할 수 있습니다. -## Vitest +## 단위 및 통합 테스트 + +### Vitest esbuild로 동작하며 ESM, TypeScript, JSX를 지원하는 Vite-native 단위 테스팅 프레임워크입니다. @@ -43,11 +46,159 @@ export default getViteConfig( GitHub에서 [Astro + Vitest 시작 템플릿](https://github.com/withastro/astro/tree/latest/examples/with-vitest)을 확인하세요. -## Cypress +#### Vitest 및 컨테이너 API + +

+ +[컨테이너 API](/ko/reference/container-reference/)를 사용하여 Astro 컴포넌트를 테스트할 수 있습니다. 먼저, [위에 설명된 대로 `vitest`를 설정](#vitest)한 다음 `.test.js` 파일을 생성하여 컴포넌트를 테스트하세요. + +```js title="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 테스트 + +### Playwright + +Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입니다. JavaScript 또는 TypeScript에서 Playwright API를 사용하여 Chromium, WebKit, Firefox를 포함한 모든 최신 렌더링 엔진에서 Astro 코드를 테스트하세요. + +#### 설치 + +[VS Code 확장](https://playwright.dev/docs/getting-started-vscode)을 사용하여 테스트를 시작하고 실행할 수 있습니다. + +또는 원하는 패키지 관리자를 사용하여 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" + --- + --- + + + Astro는 놀랍습니다! + + + + + ``` + +2. 새 `src/test/` 디렉터리를 생성하고 다음 테스트 파일을 추가하세요. 페이지의 메타 정보가 정확한지 확인하기 위해 다음 테스트 코드를 복사하여 테스트 파일에서 사용하세요. 테스트 중인 페이지와 일치하도록 페이지의 ``의 값을 업데이트하세요. + + ```jsx title="src/test/index.spec.ts" "Astro는 놀랍습니다!" + 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"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 설정할 수 있습니다. + ::: +</Steps> + +#### Playwright 테스트 실행 + +단일 테스트 및 여러 테스트를 한번에 실행할 수 있으며, 단일 브라우저 또는 여러 브라우저에서 테스트 할 수도 있습니다. 기본적으로 테스트 결과는 터미널에 표시됩니다. 선택적으로 HTML Test Reporter를 실행하여 전체 보고서를 확인하고 테스트 결과를 필터링할 수도 있습니다. + +<Steps> +1. 명령줄을 사용하여 이전 예시 코드를 테스트하려면 `test` 명령을 사용하세요. 하나의 파일에 대해 테스트하기 위해 파일 이름을 포함시킬 수도 있습니다. + + ```sh + npx playwright test index.spec.ts + ``` + +2. 다음 명령을 사용하여 전체 HTML 테스트 보고서를 열어 확인할 수 있습니다. + + ```sh + npx playwright show-report + ``` +</Steps> + +:::tip +실제 배포된 사이트와 더욱 유사한 프로덕션 코드를 테스트하세요. +::: + +##### 고급: 테스트 중 개발 웹 서버 시작 + +또한, Playwright 구성 파일의 `webServer` 옵션을 사용하여 테스트 스크립트가 실행될 때 Playwright가 웹 서버를 시작하도록 설정할 수도 있습니다. + +다음은 npm을 사용할 때 필요한 구성 및 명령의 예입니다. + +<Steps> +1. 프로젝트의 `package.json` 파일에 `"test:e2e": "playwright test"`와 같은 테스트 스크립트를 추가합니다. + +2. `playwright.config.ts`에서 `webServer` 객체를 추가하고 command 속성의 값을 `npm run preview`로 업데이트합니다. + + ```js title="playwright.config.ts" ins={4-9} "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/', + }, + }); + ``` + +3. `npm run build`를 실행한 다음 `npm run test:e2e`를 실행하여 Playwright 테스트를 시작합니다. +</Steps> + +Playwright에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다. + +- [Playwright 시작하기](https://playwright.dev/docs/intro) +- [개발 서버 사용하기](https://playwright.dev/docs/test-webserver#configuring-a-web-server) + +### Cypress Cypress는 최신 웹을 위해 제작된 프런트엔드 테스팅 도구입니다. Cypress를 사용하면 Astro 사이트에 대해 end-to-end 테스트를 시작할 수 있습니다. -### 설치 +#### 설치 원하는 패키지 관리자를 사용하여 Cypress를 설치할 수 있습니다. @@ -71,7 +222,7 @@ Cypress는 최신 웹을 위해 제작된 프런트엔드 테스팅 도구입니 </Fragment> </PackageManagerTabs> -### 구성 +#### 구성 프로젝트의 루트 디렉터리에 다음 내용이 포함된 `cypress.config.js` 파일을 생성합니다. @@ -85,7 +236,7 @@ export default defineConfig({ }); ``` -### 첫 Cypress 테스트 생성 +#### 첫 Cypress 테스트 생성 <Steps> 1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 `index.astro` 페이지를 테스트합니다. @@ -123,7 +274,7 @@ export default defineConfig({ ::: </Steps> -### Cypress 테스트 실행 +#### Cypress 테스트 실행 명령 줄이나 Cypress 앱에서 Cypress를 실행할 수 있습니다. Cypress 앱은 테스팅 및 디버깅을 위한 시각적 인터페이스를 제공합니다. @@ -166,18 +317,18 @@ Running: index.cy.js 그리고 테스트를 다시 실행하세요. 테스트가 실패했음을 알리는 빨간색 "x" 표시가 출력되어야 합니다. ::: -### 다음 단계 +#### 다음 단계 Cypress에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다. - [Cypress 개요](https://docs.cypress.io/guides/basics/introduction-to-cypress) - [앱 테스팅](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app) -## NightwatchJS +### NightwatchJS Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브라우저는 물론 기본 모바일 애플리케이션에 대한 기본 지원을 통해 웹 전체에서 테스트를 작성, 실행, 디버깅할 수 있는 강력한 도구 세트를 갖춘 테스트 자동화 프레임워크입니다. -### 설치 +#### 설치 선택한 패키지 관리자를 사용하여 Astro 프로젝트에 NightwatchJS를 설치할 수 있습니다. CLI 단계에 따라 JavaScript/TypeScript를 선택하고, 테스트 폴더 이름을 지정하고, 컴포넌트 테스트와 모바일 브라우저 테스트를 포함할지 여부를 선택하세요. @@ -199,7 +350,7 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브 </Fragment> </PackageManagerTabs> -### 첫 번째 Nightwatch 테스트 만들기 +#### 첫 번째 Nightwatch 테스트 만들기 <Steps> 1. 테스트할 페이지를 선택하세요. 이 예시에서는 아래의 `index.astro` 페이지를 테스트합니다. @@ -235,7 +386,7 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브 ::: </Steps> -### NightwatchJS 테스트 실행 +#### NightwatchJS 테스트 실행 단일 테스트 또는 여러 테스트를 한 번에 실행하여 하나 또는 여러 브라우저를 테스트할 수 있습니다. 기본적으로 테스트 결과는 터미널에 표시됩니다. 선택적으로 HTML Test Reporter를 열어 전체 보고서를 표시하고 테스트 결과를 필터링할 수 있습니다. @@ -266,126 +417,4 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브 NightwatchJS에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다. - [Nightwatch 소개](https://nightwatchjs.org/guide/overview/what-is-nightwatch.html) - - [Nightwatch를 이용한 테스팅](https://nightwatchjs.org/guide/writing-tests/introduction.html) - -## Playwright - -Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입니다. JavaScript 또는 TypeScript에서 Playwright API를 사용하여 Chromium, WebKit, Firefox를 포함한 모든 최신 렌더링 엔진에서 Astro 코드를 테스트하세요. - -### 설치 - -[VS Code 확장](https://playwright.dev/docs/getting-started-vscode)을 사용하여 테스트를 시작하고 실행할 수 있습니다. - -또는 원하는 패키지 관리자를 사용하여 Astro 프로젝트에 Playwright를 설치할 수 있습니다. CLI 단계에 따라 JavaScript/TypeScript를 선택하고, 테스트 폴더 이름을 지정하고, 선택적으로 GitHub Actions 워크플로를 추가하세요. - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm init playwright@latest - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm dlx create-playwright - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn create playwright - ``` - </Fragment> -</PackageManagerTabs> - -### 첫 Playwright 테스트 생성 - -<Steps> -1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 `index.astro` 페이지를 테스트합니다. - - ```html title="src/pages/index.astro" - --- - --- - <html lang="ko"> - <head> - <title>Astro는 놀랍습니다! - - - - - ``` - -2. 새 `src/test/` 디렉터리를 생성하고 다음 테스트 파일을 추가하세요. 페이지의 메타 정보가 정확한지 확인하기 위해 다음 테스트 코드를 복사하여 테스트 파일에서 사용하세요. 테스트 중인 페이지와 일치하도록 페이지의 ``의 값을 업데이트하세요. - - ```jsx title="src/test/index.spec.ts" "Astro는 놀랍습니다!" - 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"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 설정할 수 있습니다. - ::: -</Steps> - -### Playwright 테스트 실행 - -단일 테스트 및 여러 테스트를 한번에 실행할 수 있으며, 단일 브라우저 또는 여러 브라우저에서 테스트 할 수도 있습니다. 기본적으로 테스트 결과는 터미널에 표시됩니다. 선택적으로 HTML Test Reporter를 실행하여 전체 보고서를 확인하고 테스트 결과를 필터링할 수도 있습니다. - -<Steps> -1. 명령줄을 사용하여 이전 예시 코드를 테스트하려면 `test` 명령을 사용하세요. 하나의 파일에 대해 테스트하기 위해 파일 이름을 포함시킬 수도 있습니다. - - ```sh - npx playwright test index.spec.ts - ``` - -2. 다음 명령을 사용하여 전체 HTML 테스트 보고서를 열어 확인할 수 있습니다. - - ```sh - npx playwright show-report - ``` -</Steps> - -:::tip -실제 배포된 사이트와 더욱 유사한 프로덕션 코드를 테스트하세요. -::: - -#### 고급: 테스트 중 개발 웹 서버 시작 - -또한, Playwright 구성 파일의 `webServer` 옵션을 사용하여 테스트 스크립트가 실행될 때 Playwright가 웹 서버를 시작하도록 설정할 수도 있습니다. - -다음은 npm을 사용할 때 필요한 구성 및 명령의 예입니다. - -<Steps> -1. 프로젝트의 `package.json` 파일에 `"test:e2e": "playwright test"`와 같은 테스트 스크립트를 추가합니다. - -2. `playwright.config.ts`에서 `webServer` 객체를 추가하고 command 속성의 값을 `npm run preview`로 업데이트합니다. - - ```js title="playwright.config.ts" ins={4-9} "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/', - }, - }); - ``` - -3. `npm run build`를 실행한 다음 `npm run test:e2e`를 실행하여 Playwright 테스트를 시작합니다. -</Steps> - -Playwright에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다. - -- [Playwright 시작하기](https://playwright.dev/docs/intro) -- [개발 서버 사용하기](https://playwright.dev/docs/test-webserver#configuring-a-web-server) + - [Nightwatch를 이용한 테스팅](https://nightwatchjs.org/guide/writing-tests/introduction.html) \ No newline at end of file