Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i18n(ko-KR): update testing.mdx #8387

Merged
merged 2 commits into from
May 24, 2024
Merged

i18n(ko-KR): update testing.mdx #8387

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c47972
i18n(ko-KR): update `testing.mdx`
jsparkdev May 24, 2024
401eded
Merge branch 'main' into testing
yanthomasdev May 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 163 additions & 134 deletions src/content/docs/ko/guides/testing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 단위 테스팅 프레임워크입니다.

Expand Down Expand Up @@ -43,11 +46,159 @@ export default getViteConfig(

GitHub에서 [Astro + Vitest 시작 템플릿](https://github.com/withastro/astro/tree/latest/examples/with-vitest)을 확인하세요.

## Cypress
#### Vitest 및 컨테이너 API

<p><Since v="4.9.0" /></p>

[컨테이너 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 워크플로를 추가하세요.

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

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

```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를 설치할 수 있습니다.

Expand All @@ -71,7 +222,7 @@ Cypress는 최신 웹을 위해 제작된 프런트엔드 테스팅 도구입니
</Fragment>
</PackageManagerTabs>

### 구성
#### 구성

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

Expand All @@ -85,7 +236,7 @@ export default defineConfig({
});
```

### 첫 Cypress 테스트 생성
#### 첫 Cypress 테스트 생성

<Steps>
1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 `index.astro` 페이지를 테스트합니다.
Expand Down Expand Up @@ -123,7 +274,7 @@ export default defineConfig({
:::
</Steps>

### Cypress 테스트 실행
#### Cypress 테스트 실행

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

Expand Down Expand Up @@ -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를 선택하고, 테스트 폴더 이름을 지정하고, 컴포넌트 테스트와 모바일 브라우저 테스트를 포함할지 여부를 선택하세요.

Expand All @@ -199,7 +350,7 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브
</Fragment>
</PackageManagerTabs>

### 첫 번째 Nightwatch 테스트 만들기
#### 첫 번째 Nightwatch 테스트 만들기

<Steps>
1. 테스트할 페이지를 선택하세요. 이 예시에서는 아래의 `index.astro` 페이지를 테스트합니다.
Expand Down Expand Up @@ -235,7 +386,7 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브
:::
</Steps>

### NightwatchJS 테스트 실행
#### NightwatchJS 테스트 실행

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

Expand Down Expand Up @@ -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는 놀랍습니다!</title>
<meta
name="description"
content="Astro의 차세대 아일랜드 아키텍처를 통해 어디에서나 콘텐츠를 가져와 빠르게 제공할 수 있습니다."
/>
</head>
<body></body>
</html>
```

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

```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)
Loading