Skip to content

Commit c3891da

Browse files
committed
Update section title and some sentence
1 parent a56bca9 commit c3891da

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

โ€Žcontent/docs/testing-environments.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,45 @@ prev: testing-recipes.html
99

1010
์ด ๋ฌธ์„œ๋Š” ํ™˜๊ฒฝ์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ๋Š” ์š”์†Œ์™€ ์ผ๋ถ€ ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋Œ€ํ•œ ๊ถŒ์žฅ ์‚ฌํ•ญ์„ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค.
1111

12-
### ํ…Œ์ŠคํŠธ {#test-runners}
12+
### ํ…Œ์ŠคํŠธ ๋Ÿฌ๋„ˆ {#test-runners}
1313

1414
[Jest](https://jestjs.io/), [Mocha](https://mochajs.org/), [ava](https://github.com/avajs/ava)์™€ ๊ฐ™์€ ํ…Œ์ŠคํŠธ ๋Ÿฌ๋„ˆ๋Š” ํ…Œ์ŠคํŠธ ์Šค์œ„ํŠธ๋ฅผ ์ผ๋ฐ˜ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋กœ ์ž‘์„ฑํ•˜๊ณ , ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค์˜ ์ผ๋ถ€๋กœ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์ถ”๊ฐ€์ ์œผ๋กœ, ํ…Œ์ŠคํŠธ ์Šค์œ„ํŠธ๋Š” ์ง€์†์  ํ†ตํ•ฉ์˜ ์ผ๋ถ€๋กœ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค.
1515

16-
Jest๋Š” ๋ชจ์˜ [๋ชจ๋“ˆ](#mocking-modules) ๋ฐ [ํƒ€์ด๋จธ](#mocking-timers), ๊ทธ๋ฆฌ๊ณ  [jsdom](#mocking-a-rendering-surface) ์ง€์› ๋“ฑ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋Š” React ํ”„๋กœ์ ํŠธ์™€ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ํ˜ธํ™˜๋ฉ๋‹ˆ๋‹ค. **React ์•ฑ์„ ๋งŒ๋“ค ๋•Œ, Jest๋Š” ์ด๋ฏธ ์œ ์šฉํ•œ ๋„๊ตฌ๋กœ [์ƒ์ž์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.](https://create-react-app.dev/docs/running-tests/)**
17-
[mocha](https://mochajs.org/#running-mocha-in-the-browser)๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์€ ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ๋„ ์ž˜ ์ž‘๋™ํ•˜๋ฉฐ, ์ด๋Š” ๋ถ„๋ช…ํžˆ ํ•„์š”ํ•œ ํ…Œ์ŠคํŠธ์— ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
18-
์—”๋“œ ํˆฌ ์—”๋“œ ํ…Œ์ŠคํŠธ๋Š” ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์— ๊ฑธ์นœ ๊ธด ํ๋ฆ„์„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋ฉฐ, [๋‹ค๋ฅธ ์„ค์ •](#end-to-end-tests-aka-e2e-tests)์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
16+
- Jest๋Š” ๋ชจ์˜ [๋ชจ๋“ˆ](#mocking-modules) ๋ฐ [ํƒ€์ด๋จธ](#mocking-timers), ๊ทธ๋ฆฌ๊ณ  [jsdom](#mocking-a-rendering-surface) ์ง€์› ๋“ฑ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์„ ์ง€์›ํ•˜๋Š” React ํ”„๋กœ์ ํŠธ์™€ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ํ˜ธํ™˜๋ฉ๋‹ˆ๋‹ค. **Create React App์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด, [Jest๋Š” ์ด๋ฏธ ์œ ์šฉํ•œ ๊ธฐ๋ณธ๊ฐ’๊ณผ ํ•จ๊ป˜ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.](https://create-react-app.dev/docs/running-tests/)**
17+
- [mocha](https://mochajs.org/#running-mocha-in-the-browser)๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์‹ค์ œ ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ๋„ ์ž˜ ์ž‘๋™ํ•˜๋ฉฐ, ์ด๋Š” ๋ถ„๋ช…ํžˆ ํ•„์š”ํ•œ ํ…Œ์ŠคํŠธ์— ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
18+
- ์—”๋“œ ํˆฌ ์—”๋“œ ํ…Œ์ŠคํŠธ๋Š” ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์— ๊ฑธ์นœ ๊ธด ํ๋ฆ„์„ ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋ฉฐ, [๋‹ค๋ฅธ ์„ค์ •](#end-to-end-tests-aka-e2e-tests)์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
1919

20-
### ๋ Œ๋”๋ง ํ‘œ๋ฉด์— ๋Œ€ํ•œ ๋ชจ์˜ {#mocking-a-rendering-surface}
20+
### ๋ Œ๋”๋ง ํ‘œ๋ฉด์— ๋Œ€ํ•œ ๋ชจ์˜ํ•˜๊ธฐ {#mocking-a-rendering-surface}
2121

2222
ํ…Œ์ŠคํŠธ๋Š” ์ข…์ข… ๋ธŒ๋ผ์šฐ์ €์™€ ๊ฐ™์€ ์‹ค์ œ ๋ Œ๋”๋ง ํ‘œ๋ฉด์— ์ ‘๊ทผํ•˜์ง€ ์•Š์€ ํ™˜๊ฒฝ์—์„œ๋„ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ ํ™˜๊ฒฝ์—์„œ๋Š”, Node.js ๋‚ด์—์„œ ์‹คํ–‰๋˜๋Š” ๊ฐ€๋ฒผ์šด ๋ธŒ๋ผ์šฐ์ €์ธ [jsdom](https://github.com/jsdom/jsdom)์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.
2323

2424
๋Œ€์ฒด๋กœ, jsdom์€ ์ผ๋ฐ˜ ๋ธŒ๋ผ์šฐ์ €์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜์ง€๋งŒ [๋ ˆ์ด์•„์›ƒ์ด๋‚˜ ํƒ์ƒ‰](https://github.com/jsdom/jsdom#unimplemented-parts-of-the-web-platform)๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ์€ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์—ฌ์ „ํžˆ ๋Œ€๋ถ€๋ถ„์˜ ์›น ๊ธฐ๋ฐ˜ ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ํ…Œ์ŠคํŠธ๋ฅผ ์œ„ํ•ด ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋นจ๋ฆฌ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ํ…Œ์ŠคํŠธ์™€ ๋™์ผํ•œ ํ”„๋กœ์„ธ์Šค์—์„œ ์‹คํ–‰๋˜๋ฏ€๋กœ, ๋ Œ๋”๋ง๋œ DOM์„ ๊ฒ€ํ† ํ•˜๊ณ  ๊ฒ€์ฆํ•  ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
2525

26-
์‹ค์ œ ๋ธŒ๋ผ์šฐ์ €์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, jsdom์€ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์„ ๋ชจ๋ธ๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ๋Š” DOM ๋…ธ๋“œ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์†กํ•œ ๋‹ค์Œ ์ด๋Ÿฌํ•œ ๋™์ž‘์˜ ๋ถ€์ž‘์šฉ์„ ๊ด€์ฐฐํ•˜๊ณ  ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. [(์˜ˆ์‹œ)](/docs/testing-recipes.html#events)
26+
์‹ค์ œ ๋ธŒ๋ผ์šฐ์ €์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ, jsdom์€ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์„ ๋ชจ๋ธ๋งํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ๋Š” DOM ๋…ธ๋“œ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์†กํ•œ ๋‹ค์Œ ์ด๋Ÿฌํ•œ ๋™์ž‘์˜ ๋ถ€์ž‘์šฉ์„ ๊ด€์ฐฐํ•˜๊ณ  ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. [<small>(์˜ˆ์‹œ)</small>](/docs/testing-recipes.html#events)
2727

28-
UI ํ…Œ์ŠคํŠธ์˜ ๋งŽ์€ ๋ถ€๋ถ„์€ ์œ„์˜ ์„ค์ •์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. jsdom์—๊ฒŒ ๋ Œ๋”๋งํ•˜๋Š” ํ…Œ์ŠคํŠธ ๋Ÿฌ๋„ˆ๋กœ์„œ, ๋ธŒ๋ผ์šฐ์ € ์ด๋ฒคํŠธ ์‹œํ€€์Šค๋กœ ์ง€์ •๋œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ๊ณผ ํ•จ๊ป˜Jest๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ act() ๋„์šฐ๋ฏธ์— ์˜ํ•ด ์ž‘๋™๋ฉ๋‹ˆ๋‹ค.[(์˜ˆ์‹œ)](/docs/testing-recipes.html) ์˜ˆ๋ฅผ ๋“ค์–ด, ๋งŽ์€ React ์ž์ฒด ํ…Œ์ŠคํŠธ๋Š” ์ด๋Ÿฐ ์กฐํ•ฉ์œผ๋กœ ์ž‘์„ฑ๋ฉ๋‹ˆ๋‹ค.
28+
UI ํ…Œ์ŠคํŠธ์˜ ๋งŽ์€ ๋ถ€๋ถ„์€ ์œ„์˜ ์„ค์ •์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. jsdom์—๊ฒŒ ๋ Œ๋”๋งํ•˜๋Š” ํ…Œ์ŠคํŠธ ๋Ÿฌ๋„ˆ๋กœ์„œ, ๋ธŒ๋ผ์šฐ์ € ์ด๋ฒคํŠธ ์‹œํ€€์Šค๋กœ ์ง€์ •๋œ ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ๊ณผ ํ•จ๊ป˜Jest๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ `act()` ๋„์šฐ๋ฏธ์— ์˜ํ•ด ์ž‘๋™๋ฉ๋‹ˆ๋‹ค.[<small>(์˜ˆ์‹œ)</small>](/docs/testing-recipes.html) ์˜ˆ๋ฅผ ๋“ค์–ด, ๋งŽ์€ React ์ž์ฒด ํ…Œ์ŠคํŠธ๋Š” ์ด๋Ÿฐ ์กฐํ•ฉ์œผ๋กœ ์ž‘์„ฑ๋ฉ๋‹ˆ๋‹ค.
2929

3030
๋งŒ์•ฝ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๋ณ„ ๋™์ž‘์„ ํ…Œ์ŠคํŠธํ•˜๊ณ  ๋ ˆ์ด์•„์›ƒ์ด๋‚˜ ์‹ค์ œ ์ž…๋ ฅ๊ณผ ๊ฐ™์€ ๋„ค์ดํ‹ฐ๋ธŒ ๋ธŒ๋ผ์šฐ์ € ๋™์ž‘์„ ์š”๊ตฌํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒฝ์šฐ [mocha](https://mochajs.org/)์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„ ์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3131

32-
DOM์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜*ํ•  ์ˆ˜ ์—†๋Š”* ํ™˜๊ฒฝ์—์„œ (์˜ˆ๋ฅผ ๋“ค๋ฉด, Node.js์—์„œ React Native ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ), ์—˜๋ฆฌ๋จผํŠธ์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•˜๊ธฐ ์œ„ํ•ด [event simulation helpers](/docs/test-utils.html#simulate)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋Œ€์•ˆ์œผ๋กœ, [`@testing-library/react-native`](https://testing-library.com/docs/native-testing-library)์˜ `fireEvent` ํ—ฌํผ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
32+
DOM์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜*ํ•  ์ˆ˜ ์—†๋Š”* ํ™˜๊ฒฝ์—์„œ (์˜ˆ๋ฅผ ๋“ค๋ฉด, Node.js์—์„œ React Native ์ปดํฌ๋„ŒํŠธ ํ…Œ์ŠคํŠธ), ์—˜๋ฆฌ๋จผํŠธ์™€์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•˜๊ธฐ ์œ„ํ•ด [์ด๋ฒคํŠธ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ํ—ฌํผ](/docs/test-utils.html#simulate)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๋Œ€์•ˆ์œผ๋กœ, [`@testing-library/react-native`](https://testing-library.com/docs/native-testing-library)์˜ `fireEvent` ํ—ฌํผ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3333

3434
[Cypress](https://www.cypress.io/), [puppeteer](https://github.com/GoogleChrome/puppeteer), [webdriver](https://www.seleniumhq.org/projects/webdriver/) ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๋“ค์€ [end-to-end ํ…Œ์ŠคํŠธ](#end-to-end-tests-aka-e2e-tests)๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ์— ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
3535

36-
### ๋ชจ์˜ ํ•จ์ˆ˜ {#mocking-functions}
36+
### ํ•จ์ˆ˜ ๋ชจ์˜ํ•˜๊ธฐ {#mocking-functions}
3737

3838
ํ…Œ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ, ์šฐ๋ฆฌ๋Š” ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ ๋‚ด๋ถ€์—์„œ ๋™๋“ฑ์„ฑ์ด ์—†๋Š” ์šฐ๋ฆฌ์˜ ์ฝ”๋“œ ์ค‘ ์ผ๋ถ€๋ฅผ ๋ชฉ์•„์›ƒํ•˜๊ณ  ์‹ถ์–ดํ•ฉ๋‹ˆ๋‹ค(์˜ˆ๋ฅผ ๋“ค์–ด, `navigator.onLine` ์ƒํƒœ๋ฅผ Node.js ๋‚ด๋ถ€์—์„œ ํ™•์ธํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ). ํ…Œ์ŠคํŠธ๋Š” ๋˜ํ•œ ์ผ๋ถ€ ํ•จ์ˆ˜๋ฅผ ๊ฐ์‹œํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํ…Œ์ŠคํŠธ์˜ ๋‹ค๋ฅธ ๋ถ€๋ถ„์ด ํ•จ์ˆ˜๋“ค๊ณผ ์–ด๋–ป๊ฒŒ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š”์ง€๋ฅผ ๊ด€์ฐฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์ด๋Ÿฌํ•œ ํ•จ์ˆ˜๋“ค์„ ์„ ํƒ์ ์œผ๋กœ ์‹œํ—˜ ์นœํ™”์ ์ธ ๋ฒ„์ „์œผ๋กœ ๋ชจ์˜ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์—์„œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
3939

40-
๋ชจ์˜ ํ•จ์ˆ˜๋Š” ํŠนํžˆ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ API ์ข…๋‹จ์ ์œผ๋กœ๋ถ€ํ„ฐ ๋ฐœ์ƒํ•˜๋Š” ๋А๋ ค์ง๊ณผ ์†์ƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ํ…Œ์ŠคํŠธ์— "๊ฐ€์งœ"๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค [(์˜ˆ์‹œ)](/docs/testing-recipes.html#data-fetching). ์ด๋Š” ํ…Œ์ŠคํŠธ๋ฅผ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. [Jest](https://jestjs.io/)์™€ [sinon](https://sinonjs.org/)๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์€ ๋ชจ์˜ ํ•จ์ˆ˜๋“ค์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์—”๋“œ ํˆฌ ์—”๋“œ ํ…Œ์ŠคํŠธ์˜ ๊ฒฝ์šฐ ๋„คํŠธ์›Œํฌ๋ฅผ ๋ชจ์‚ฌํ•˜๋Š” ๊ฒƒ์€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ API ์—”๋“œํฌ์ธํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ๋ฅผ ์›ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
40+
๋ชจ์˜ ํ•จ์ˆ˜๋Š” ํŠนํžˆ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ API ์ข…๋‹จ์ ์œผ๋กœ๋ถ€ํ„ฐ ๋ฐœ์ƒํ•˜๋Š” ๋А๋ ค์ง๊ณผ ์†์ƒ์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ํ…Œ์ŠคํŠธ์— "๊ฐ€์งœ"๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•œ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค [<small>(์˜ˆ์‹œ)</small>](/docs/testing-recipes.html#data-fetching). ์ด๋Š” ํ…Œ์ŠคํŠธ๋ฅผ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. [Jest](https://jestjs.io/)์™€ [sinon](https://sinonjs.org/)๊ณผ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์€ ๋ชจ์˜ ํ•จ์ˆ˜๋“ค์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์—”๋“œ ํˆฌ ์—”๋“œ ํ…Œ์ŠคํŠธ์˜ ๊ฒฝ์šฐ ๋„คํŠธ์›Œํฌ๋ฅผ ๋ชจ์‚ฌํ•˜๋Š” ๊ฒƒ์€ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์ง€๋งŒ, ์‹ค์ œ API ์—”๋“œํฌ์ธํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜๊ธฐ๋ฅผ ์›ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
4141

42-
### ๋ชจ์˜ ๋ชจ๋“ˆ {#mocking-modules}
42+
### ๋ชจ๋“ˆ ๋ชจ์˜ํ•˜๊ธฐ {#mocking-modules}
4343

44-
์ผ๋ถ€ ์ปดํฌ๋„ŒํŠธ๋Š” ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์—์„œ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ํ…Œ์ŠคํŠธ์— ํ•„์ˆ˜์ ์ด์ง€ ์•Š์€ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์˜์กด์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ ์ ˆํ•œ ๊ต์ฒด๋ฅผ ํ†ตํ•ด ์ด๋Ÿฌํ•œ ๋ชจ๋“ˆ์„ ์„ ํƒ์ ์œผ๋กœ ๋ชจ์˜ํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [(์˜ˆ์‹œ)](/docs/testing-recipes.html#mocking-modules).
44+
์ผ๋ถ€ ์ปดํฌ๋„ŒํŠธ๋Š” ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์—์„œ ์ž˜ ์ž‘๋™ํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ํ…Œ์ŠคํŠธ์— ํ•„์ˆ˜์ ์ด์ง€ ์•Š์€ ๋ชจ๋“ˆ์— ๋Œ€ํ•œ ์˜์กด์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ ์ ˆํ•œ ๊ต์ฒด๋ฅผ ํ†ตํ•ด ์ด๋Ÿฌํ•œ ๋ชจ๋“ˆ์„ ์„ ํƒ์ ์œผ๋กœ ๋ชจ์˜ํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค [<small>(์˜ˆ์‹œ)</small>](/docs/testing-recipes.html#mocking-modules).
4545

4646
Node.js์—์„œ Jest๊ฐ™์€ ๋Ÿฌ๋„ˆ๋Š” [๋ชจ์˜ ๋ชจ๋“ˆ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค](https://jestjs.io/docs/en/manual-mocks). ๋˜ํ•œ [mock-require](https://www.npmjs.com/package/mock-require) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
4747

48-
### ๋ชจ์˜ ํƒ€์ด๋จธ {#mocking-timers}
48+
### ํƒ€์ด๋จธ ๋ชจ์˜ํ•˜๊ธฐ {#mocking-timers}
4949

50-
์ปดํฌ๋„ŒํŠธ๋Š” setTimeout, setInterval, Data.now์™€ ๊ฐ™์€ ์‹œ๊ฐ„์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์—์„œ, ์ด๋Ÿฌํ•œ ํ•จ์ˆ˜๋“ค์„ ์ˆ˜๋™์œผ๋กœ ๋ฐœ์ „ํ•  ์ˆ˜ ์žˆ๋Š” ๋Œ€์ฒดํ’ˆ์œผ๋กœ ๋ชจ์˜ํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํ…Œ์ŠคํŠธ๊ฐ€ ๋นจ๋ฆฌ ์ง„ํ–‰๋˜๋„๋ก ํ•˜๋Š” ๋ฐ ์ข‹๋‹ค! ํƒ€์ด๋จธ์— ์˜์กดํ•˜๋Š” ํ…Œ์ŠคํŠธ๋Š” ์—ฌ์ „ํžˆ ์ˆœ์„œ๋Œ€๋กœ ํ•ด๊ฒฐ๋˜์ง€๋งŒ ๋” ๋นจ๋ฆฌ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค[(์˜ˆ์‹œ)](https://github.com/reactjs/ko.reactjs.org/blob/master/docs/testing-recipes.html#timers). [Jest](https://jestjs.io/docs/en/timer-mocks), [sinon](https://sinonjs.org/releases/v7.3.2/fake-timers/), [lolex](https://github.com/sinonjs/lolex)๋ฅผ ํฌํ•จํ•œ ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ํ…Œ์ŠคํŠธ์—์„œ ํƒ€์ด๋จธ๋ฅผ ๋ชจ์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.
50+
์ปดํฌ๋„ŒํŠธ๋Š” `setTimeout`, `setInterval`, `Data.now`์™€ ๊ฐ™์€ ์‹œ๊ฐ„์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์—์„œ, ์ด๋Ÿฌํ•œ ํ•จ์ˆ˜๋“ค์„ ์ˆ˜๋™์œผ๋กœ ๋ฐœ์ „ํ•  ์ˆ˜ ์žˆ๋Š” ๋Œ€์ฒดํ’ˆ์œผ๋กœ ๋ชจ์˜ํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํ…Œ์ŠคํŠธ๊ฐ€ ๋นจ๋ฆฌ ์ง„ํ–‰๋˜๋„๋ก ํ•˜๋Š” ๋ฐ ์ข‹๋‹ค! ํƒ€์ด๋จธ์— ์˜์กดํ•˜๋Š” ํ…Œ์ŠคํŠธ๋Š” ์—ฌ์ „ํžˆ ์ˆœ์„œ๋Œ€๋กœ ํ•ด๊ฒฐ๋˜์ง€๋งŒ ๋” ๋นจ๋ฆฌ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค [<small>(์˜ˆ์‹œ)</small>](https://github.com/reactjs/ko.reactjs.org/blob/master/docs/testing-recipes.html#timers). [Jest](https://jestjs.io/docs/en/timer-mocks), [sinon](https://sinonjs.org/releases/v7.3.2/fake-timers/), [lolex](https://github.com/sinonjs/lolex)๋ฅผ ํฌํ•จํ•œ ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ํ…Œ์ŠคํŠธ์—์„œ ํƒ€์ด๋จธ๋ฅผ ๋ชจ์˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.
5151

5252
๊ฐ€๋”, ๋ชจ์˜ ํƒ€์ด๋จธ๋ฅผ ์›ํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ…Œ์ŠคํŠธํ•˜๊ฑฐ๋‚˜, ๋˜๋Š” (API ์†๋„ ์ œํ•œ ์žฅ์น˜์™€ ๊ฐ™์€) ํƒ€์ด๋ฐ์— ๋ฏผ๊ฐํ•œ ์ข…๋‹จ์ ๊ณผ์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ํƒ€์ด๋จธ ๋ชจ์˜๊ฐ€ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ํ…Œ์ŠคํŠธ/๋ฌถ์Œ๋ณ„๋กœ ํ™œ์„ฑํ™” ๋ฐ ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ด๋Ÿฌํ•œ ํ…Œ์ŠคํŠธ ์‹คํ–‰ ๋ฐฉ๋ฒ•์„ ๋ช…์‹œ์ ์œผ๋กœ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
5353

0 commit comments

Comments
ย (0)