03-pages > 01-building-your-application > 05-optimizing > 10-testing.mdx by taehee-ww · Pull Request #386 · Nextjs-kr/Nextjs.kr

taehee-ww · 2023-07-01T13:20:14Z

기여자용

문서 개선

PR을 열기 전에 pnpm prettier-fix를 실행하여 서식 문제를 해결합니다. - 문서 기여 가이드를 읽고 문서 지침을 따르는지 확인하세요: https://github.com/Nextjs-kr/Nextjs.ko/blob/main/packages/next/README.md

Progress

pnpm prettier-fix
번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

상세한 번역어나 고민되는 부분을 월요일 쯤에 정리해서 올리겠습니다!

devyuriii · 2023-07-03T01:54:27Z

ref #141

sunmerrr · 2023-07-25T01:30:46Z

 </details>

-Learn how to set up Next.js with commonly used testing tools: [Cypress](#cypress), [Playwright](#playwright), and [Jest with React Testing Library](#jest-and-react-testing-library).
+description: Next.js에 널리 쓰이는 테스팅 도구 3가지 - [Cypress](#cypress), [Playwright](#playwright), [Jest 와 React Testing Library](#jest-and-react-testing-library) - 를 셋업하는 방법을 배웁니다.


description: 은 빼는 것이 자연스러울 것 같은데 어떠신가요?

반영했습니다

sunmerrr · 2023-07-25T01:49:47Z

+컴포넌트 테스트는 전체 애플리케이션을 번들하거나 서버를 실행할 필요 없이 특정 컴포넌트를 빌드하고 마운트합니다. 이를 통해 더 나은 성능을 보이면서도, 여전히 눈에 보이는 피드백을 받고 Cypress E2E 테스트에 쓰이는 것과 동일한 API를 사용할 수 있습니다.

-> **Good to know**: Since component tests do not launch a Next.js server, capabilities like `<Image />` and `getServerSideProps` which rely on a server being available will not function out-of-the-box. See the [Cypress Next.js docs](https://docs.cypress.io/guides/component-testing/react/overview#Nextjs) for examples of getting these features working within component tests.
+> **참고**: 컴포넌트 테스트는 Next.js 서버를 시작하지 않으므로 서버에 의존하는 `<이미지 />` 및 `getServerSideProps`와 같은 기능이 저절로(out-of-the-box)동작하지 않습니다. 컴포넌트 테스트에서 이러한 기능이 돌아가게 하는 예제는 [Cypress Next.js 문서](https://docs.cypress.io/guides/component-testing/react/overview#Nextjs)를 참조하세요.


<이미지 />는 번역하지 않는 것이 좋을 것 같습니다.
<Image />

반영했습니다

sunmerrr · 2023-07-25T01:56:25Z

-### Getting ready for Continuous Integration (CI)
+### 지속적 통합(CI)을 위한 준비

 You will have noticed that running Cypress so far has opened an interactive browser which is not ideal for CI environments. You can also run Cypress headlessly using the `cypress run` command:


해당 부분을 지우는 것을 잊으신 것 같습니다^^

반영했습니다

sunmerrr · 2023-07-25T02:00:43Z

 ```

-You can look through the generated examples and the [Writing Your First Test](https://docs.cypress.io/guides/getting-started/writing-your-first-test) section of the Cypress Documentation to help you get familiar with Cypress.
+생성된 예제를 살펴보고 Cypress 문서에서 [첫 테스트 작성하기](https://docs.cypress.io/guides/getting-started/writing-your-first-test) 부분을 보시면 Cypress와 익숙해지는데 도움이 될 겁니다.


'example'은 '예시'로 번역해주시면 됩니다. 참고

sunmerrr · 2023-07-25T02:05:42Z

 ### Quickstart

-The fastest way to get started is to use `create-next-app` with the [with-playwright example](https://github.com/vercel/next.js/tree/canary/examples/with-playwright). This will create a Next.js project complete with Playwright all set up.
+가장 빠르게 시작하는 방법은 `create-next-app`을 [with-playwright 예제](https://github.com/vercel/next.js/tree/canary/examples/with-playwright)와 함께 사용하는 것입니다. 그러면 Playwright가 모두 설정된 Next.js 프로젝트가 생성됩니다.


24번째 줄에서는 [with-cypress example]으로 example을 번역해주시지 않으셨던데 통일하는 것이 어떨까요?

sunmerrr · 2023-07-25T02:13:16Z

 ```

-Add Playwright to the `package.json` scripts field:
+`package.json` scripts 속성에 Playwright를 추가합니다.:


쌍점은 거의 사용하지 않습니다 참고

392, 471, 517 번째 줄도 확인해주세요:)

sunmerrr · 2023-07-25T03:55:28Z

 ```

-You can use `page.goto("/")` instead of `page.goto("http://localhost:3000/")`, if you add [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) to the `playwright.config.ts` configuration file.
+`playwright.config.ts` 설정 파일에 [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 추가하면 `page.goto("/")` 대신 `page.goto("http://localhost:3000/")`를 사용할 수 있습니다.


아래와 같이 변경되어야 하지 않을까요?

Suggested change

`playwright.config.ts` 설정 파일에 [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 추가하면 `page.goto("/")` 대신 `page.goto("http://localhost:3000/")`를 사용할 수 있습니다.

`playwright.config.ts` 설정 파일에 [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 추가하면 `page.goto("http://localhost:3000/")` 대신 `page.goto("/")` 를 사용할 수 있습니다.

sunmerrr · 2023-07-25T03:57:34Z

+`npm run build` 및 `npm run start`를 실행한 다음 다른 터미널 창에서 `npm run test:e2e`를 실행하여 Playwright 테스트를 실행합니다.

-> **Good to know**: Alternatively, you can use the [`webServer`](https://playwright.dev/docs/test-webserver/) feature to let Playwright start the development server and wait until it's fully available.
+> **참고**: 대신에, [`webServer`](https://playwright.dev/docs/test-webserver/) 기능을 사용하여 Playwright가 개발 서버를 시작하고 완전히 사용할 수 있을 때까지 기다릴 수 있습니다.


쉼표는 꼭 똑같이 옮기지 않아도 될 것 같아요! 참고

sunmerrr · 2023-07-25T04:09:33Z

+각 설정 옵션에 대한 자세한 내용은 [Jest 문서](https://jestjs.io/docs/configuration)에서 확인할 수 있습니다.

-**Handling stylesheets and image imports**
+**스타일시트 및 이미지 가져오기 처리**


여기의 image imports와 위 331, 367 번째 줄의 imports가 다른 의미가 아니라면 통일해주는 것이 어떨까요?

sunmerrr · 2023-07-25T04:20:05Z

@taehee-ww 수고하셨습니다!!! 리뷰 확인 부탁드려요:)

ChanghyeonYoon · 2023-09-06T11:18:03Z

@taehee-ww 리뷰 이후 작업이 몇일 동안 이뤄지지 않아 9월 13일까지 작업이 없을 경우 이슈를 close하고 새로운 분에게 할당하겠습니다!

taehee-ww · 2023-09-10T23:59:56Z

리뷰 주신 걸 너무 늦게 확인했네요. ㅠㅠ 리뷰 반영했으니 확인 바랍니다.

yoo-jimin127

리뷰 반영 감사드립니다!! 추가적인 리뷰를 남겨두었어요!
검토 후 반영 부탁드립니다 :)

yoo-jimin127 · 2023-09-11T08:31:50Z

-title: Testing
-description: Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.
+title: 테스팅
+description: Next.js에 널리 쓰이는 테스팅 도구 3가지 - Cypress, Playwright, Jest와 React Testing Library - 를 셋업하는 방법을 배웁니다.


Suggested change

description: Next.js에 널리 쓰이는 테스팅 도구 3가지 - Cypress, Playwright, Jest와 React Testing Library - 를 셋업하는 방법을 배웁니다.

description: Next.js에 널리 쓰이는 테스팅 도구 3가지 - Cypress, Playwright, Jest와 React Testing Library를 셋업하는 방법을 배웁니다.

위와 같이 열거된 테스팅 도구 예시 뒤 하이픈은 생략해주셔도 좋을 것 같습니다!

yoo-jimin127 · 2023-09-11T08:32:44Z

 </details>

-Learn how to set up Next.js with commonly used testing tools: [Cypress](#cypress), [Playwright](#playwright), and [Jest with React Testing Library](#jest-and-react-testing-library).
+Next.js에 널리 쓰이는 테스팅 도구 3가지 - [Cypress](#cypress), [Playwright](#playwright), [Jest 와 React Testing Library](#jest-and-react-testing-library) - 를 셋업하는 방법을 배웁니다.


Suggested change

Next.js에 널리 쓰이는 테스팅 도구 3가지 - [Cypress](#cypress), [Playwright](#playwright), [Jest 와 React Testing Library](#jest-and-react-testing-library) - 를 셋업하는 방법을 배웁니다.

Next.js에 널리 쓰이는 테스팅 도구 3가지 - [Cypress](#cypress), [Playwright](#playwright), [Jest 와 React Testing Library](#jest-and-react-testing-library)를 셋업하는 방법을 배웁니다.

해당 내용도 하이픈 생략해주셔도 좋을 것 같습니다!! :)

yoo-jimin127 · 2023-09-11T08:36:00Z

-Playwright is a testing framework that lets you automate Chromium, Firefox, and WebKit with a single API. You can use it to write **End-to-End (E2E)** and **Integration** tests across all platforms.
+Playwright는 하나의 API로 Chromium, Firefox, WebKit을 자동화할 수 있게 해주는 테스트 프레임워크입니다. 모든 플랫폼에서 **종단 간(E2E)** 그리고 **통합** 테스트를 작성하는 데 사용할 수 있습니다.

 ### Quickstart


해당 타이틀도 번역 부탁드립니다!

yoo-jimin127 · 2023-09-11T08:37:13Z

+`npm init playwright`를 사용하여 기존 `NPM` 프로젝트에 Playwright를 추가할 수도 있습니다.

-To manually get started with Playwright, install the `@playwright/test` package:
+플레이라이트를 직접 셋업하려면 `@playwright/test` 패키지를 설치하세요


Suggested change

플레이라이트를 직접 셋업하려면 `@playwright/test` 패키지를 설치하세요

Playwright를 직접 셋업하려면 `@playwright/test` 패키지를 설치하세요

테스팅도구의 명칭이자 일관성을 위해 영문표기로 유지해주시면 더욱 좋을 것 같아요!

yoo-jimin127 · 2023-09-11T08:40:06Z

-  await expect(page.locator('h1')).toContainText('About Page')
-})
-```
+> 역주: 원문에서는 옛 css 선택자를 이용한 locator를 사용하지만, playwright에서는 이제 더 안정적인 getByRole을 추천합니다. 코드도 그에 맞게 수정했습니다. [playwright의 locator 문서](https://playwright.dev/docs/locators)를 참고 바랍니다.


해당 부분의 경우 공식문서에 따라 번역작업을 하는 것이기에, 리뷰어분들과 함께 역주 및 코드 수정 건에 대한 논의가 필요할 것 같습니다! 리뷰어분들께 한 번 더 리뷰 요청을 드려 검토하도록 하겠습니다 :)

yoo-jimin127 · 2023-09-11T08:41:05Z

+- [개발 서버 사용하기](https://playwright.dev/docs/test-webserver/)
+- [CI 제공 업체에 따른 Playwright](https://playwright.dev/docs/ci)

 ## Jest and React Testing Library


Suggested change

## Jest and React Testing Library

## Jest와 React Testing Library

yoo-jimin127 · 2023-09-11T08:41:15Z

-The following sections will go through how you can set up Jest with each of these options:
+다음 섹션에서는 이러한 각 선택지마다 Jest를 설정하는 방법을 설명합니다.

 ### Quickstart


해당 부분도 번역 부탁드립니다!

yoo-jimin127 · 2023-09-11T08:41:50Z

 ### Quickstart

-You can use `create-next-app` with the [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) example to quickly get started with Jest and React Testing Library:
+`create-next-app`을 [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) 예시와 함께 사용하면 빠르게 Jest and React Testing Library를 시작할 수 있습니다.


Suggested change

`create-next-app`을 [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) 예시와 함께 사용하면 빠르게 Jest and React Testing Library를 시작할 수 있습니다.

`create-next-app`을 [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) 예시와 함께 사용하면 빠르게 Jest와 React Testing Library를 시작할 수 있습니다.

yoo-jimin127 · 2023-09-11T08:42:25Z

+### Jest를 세팅하기 (Rust 컴파일러)

-Since the release of [Next.js 12](https://nextjs.org/blog/next-12), Next.js now has built-in configuration for Jest.
+[Next.js 12](https://nextjs.org/blog/next-12)가 출시한 이후, Next.js는 Jest의 자체 설정을 제공합니다.


Suggested change

[Next.js 12](https://nextjs.org/blog/next-12)가 출시한 이후, Next.js는 Jest의 자체 설정을 제공합니다.

[Next.js 12](https://nextjs.org/blog/next-12)의 출시 이후, Next.js는 Jest의 자체 설정을 제공합니다.

yoo-jimin127 · 2023-09-14T08:10:42Z

@taehee-ww 님! 안녕하세요 :)
번역본에 제가 작성한 리뷰 내용 중,
역주와 최신 안정화 버전에 대한 코드 수정 건과 관련해 리뷰어분들과 논의해보았습니다.

그 결과 본 오픈 소스의 메인 작업이 "번역"임에 따라 우선적으로 번역만을 진행해 주시고,
vercel/next-js 공식 문서에 번역 담당자님께서 올려주신 역주와 수정된 코드를 기반으로 이슈를 남겨보는 방향으로의 의견이 나오게 되었습니다.

따라서 본 번역본에서의 역주 및 코드 수정 부분은 번역 작업에서 우선적으로는 제외해주시길 부탁드립니다!
공식 문서 이슈 작성 건의 경우 진행 방식에 따라 재차 논의하여 처리토록 하겠습니다 :)

좋은 의견 남겨주셔서 감사합니다!

taehee-ww · 2023-12-14T00:54:12Z

으으 또 회사 일에 치이다가 대표님이 휴가도 쓰지 말라하고 야근만 해서 잊고 있었네요. 이번 주 주말에는 마무리를 할 것입니다. ㅠㅠ 늘어져서 죄송합니다.

twinstae added 3 commits July 1, 2023 22:07

테스팅 번역

f23f976

fix: pnpm prettier-fix

5397bea

fix: 영문 삭제

8871578

taehee-ww requested a review from ChanghyeonYoon as a code owner July 1, 2023 13:20

devyuriii assigned taehee-ww Jul 3, 2023

devyuriii mentioned this pull request Jul 3, 2023

🚀New Next.js Docs Translation Progress (Korean) #1

Open

ChanghyeonYoon added the documentation 문서 작업 label Jul 3, 2023

taehee-ww changed the title ~~테스팅 번역~~ 03-pages > 01-building-your-application > 05-optimizing > 10-testing.mdx Jul 8, 2023

sunmerrr added the In Review label Jul 25, 2023

sunmerrr requested review from sunmerrr and removed request for ChanghyeonYoon July 25, 2023 01:27

sunmerrr reviewed Jul 25, 2023

View reviewed changes

fix: 리뷰 반영

9a61536

taehee-ww requested a review from sunmerrr September 10, 2023 23:59

yoo-jimin127 suggested changes Sep 11, 2023

View reviewed changes

	`playwright.config.ts` 설정 파일에 [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 추가하면 `page.goto("/")` 대신 `page.goto("http://localhost:3000/")`를 사용할 수 있습니다.
	`playwright.config.ts` 설정 파일에 [`"baseURL": "http://localhost:3000"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 추가하면 `page.goto("http://localhost:3000/")` 대신 `page.goto("/")` 를 사용할 수 있습니다.

	description: Next.js에 널리 쓰이는 테스팅 도구 3가지 - Cypress, Playwright, Jest와 React Testing Library - 를 셋업하는 방법을 배웁니다.
	description: Next.js에 널리 쓰이는 테스팅 도구 3가지 - Cypress, Playwright, Jest와 React Testing Library를 셋업하는 방법을 배웁니다.

	Next.js에 널리 쓰이는 테스팅 도구 3가지 - [Cypress](#cypress), [Playwright](#playwright), [Jest 와 React Testing Library](#jest-and-react-testing-library) - 를 셋업하는 방법을 배웁니다.
	Next.js에 널리 쓰이는 테스팅 도구 3가지 - [Cypress](#cypress), [Playwright](#playwright), [Jest 와 React Testing Library](#jest-and-react-testing-library)를 셋업하는 방법을 배웁니다.

	플레이라이트를 직접 셋업하려면 `@playwright/test` 패키지를 설치하세요
	Playwright를 직접 셋업하려면 `@playwright/test` 패키지를 설치하세요

	## Jest and React Testing Library
	## Jest와 React Testing Library

	`create-next-app`을 [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) 예시와 함께 사용하면 빠르게 Jest and React Testing Library를 시작할 수 있습니다.
	`create-next-app`을 [with-jest](https://github.com/vercel/next.js/tree/canary/examples/with-jest) 예시와 함께 사용하면 빠르게 Jest와 React Testing Library를 시작할 수 있습니다.

	[Next.js 12](https://nextjs.org/blog/next-12)가 출시한 이후, Next.js는 Jest의 자체 설정을 제공합니다.
	[Next.js 12](https://nextjs.org/blog/next-12)의 출시 이후, Next.js는 Jest의 자체 설정을 제공합니다.

Conversation

taehee-ww commented Jul 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

기여자용

문서 개선

Progress

Uh oh!

devyuriii commented Jul 3, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sunmerrr commented Jul 25, 2023

Uh oh!

ChanghyeonYoon commented Sep 6, 2023

Uh oh!

taehee-ww commented Sep 10, 2023

Uh oh!

yoo-jimin127 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yoo-jimin127 commented Sep 14, 2023

Uh oh!

taehee-ww commented Dec 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

taehee-ww commented Jul 1, 2023 •

edited

Loading