{"id":910,"date":"2026-05-20T09:56:25","date_gmt":"2026-05-20T01:56:25","guid":{"rendered":"https:\/\/junai.ai\/blog\/nextjs-testing-22\/"},"modified":"2026-05-20T09:56:25","modified_gmt":"2026-05-20T01:56:25","slug":"nextjs-testing-22","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/nextjs-testing-22\/","title":{"rendered":"Next.js \ud14c\uc2a4\ud2b8 \u2014 Vitest\u00b7RTL\u00b7Playwright"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 857 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root {--color-primary:#4f46e5;--color-accent:#6366f1;--color-bg:#fafbfc;--color-bg-card:#fff;--color-text:#1a202c;--color-text-muted:#64748b;--hero-start:#1e1b4b;--hero-end:#4338ca;}\n*{box-sizing:border-box;}\n.container{max-width:760px;margin:0 auto;padding:0 24px 80px;}\n.hero{background:linear-gradient(135deg,var(--hero-start) 0%,var(--hero-end) 100%);color:#fff;padding:80px 24px 60px;text-align:center;}\n.hero .eyebrow{display:inline-block;font-size:14px;color:#a78bfa;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px;}\n.hero h1{font-size:36px;margin:0 0 16px;line-height:1.3;font-weight:800;}\n.hero p{color:#c7d2fe;font-size:18px;max-width:640px;margin:0 auto;line-height:1.6;}\n.hero img{width:100%;max-width:640px;height:auto;margin:32px auto 0;border-radius:10px;display:block;}\narticle{padding-top:48px;}\narticle h2{font-size:26px;margin:56px 0 20px;padding-left:14px;border-left:5px solid var(--color-accent);line-height:1.4;}\narticle h3{font-size:19px;margin:32px 0 12px;color:var(--color-primary);}\narticle p{margin:16px 0;}\narticle strong{color:var(--color-primary);font-weight:700;}\narticle code{background:#eef2ff;padding:2px 8px;border-radius:4px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;color:#4338ca;}\n.databox{background:#eef2ff;border-left:4px solid var(--color-accent);padding:16px 20px;margin:24px 0;border-radius:0 8px 8px 0;font-size:15.5px;}\n.databox strong{color:var(--color-primary);}\n.warnbox{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);padding:16px 20px;margin:24px 0;border-radius:8px;font-size:15.5px;}\n.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;}\ntable{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-bg-card);}\nth,td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;vertical-align:top;}\nth{background:#f1f5f9;font-weight:700;color:#0f172a;}\ntd:first-child,th:first-child{font-weight:700;}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#f1f5f9;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n.code-block{background:#0f172a;color:#e2e8f0;padding:16px 20px;border-radius:8px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:14px;line-height:1.6;margin:20px 0;overflow-x:auto;white-space:pre;}\n.cta{background:linear-gradient(135deg,#4f46e5 0%,#6366f1 100%);color:#fff;padding:28px 24px;border-radius:12px;margin:48px 0 0;text-align:center;}\n.cta h3{color:#fff;margin:0 0 8px;font-size:20px;}\n.cta p{color:#c7d2fe;margin:0;font-size:15.5px;}\n.footer-nav{margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;font-size:14px;color:var(--color-text-muted);}\n.footer-nav a{color:var(--color-primary);text-decoration:none;}\n@media (max-width:480px){.hero h1{font-size:26px;}.hero p{font-size:16px;}article h2{font-size:21px;}article h3{font-size:17px;}body{font-size:16px;}}\n<\/style>\n<section class=\"hero\">\n  <span class=\"eyebrow\">Next.js \uad50\uc7ac \u00b7 22\ud3b8 \u00b7 \ud14c\uc2a4\ud2b8<\/span>\n  <h1>Next.js \ud14c\uc2a4\ud2b8 \u2014 Vitest\u00b7RTL\u00b7Playwright<\/h1>\n  <p>3\uce35 \ud53c\ub77c\ubbf8\ub4dc \u2014 \uc720\ub2db \ub9ce\uc774, \ucef4\ud3ec\ub10c\ud2b8 \uc911\uac04, E2E \uc801\uac8c. \uadf8\uac8c \ud45c\uc900.<\/p>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-5-88.jpg\" alt=\"\ud14c\uc2a4\ud2b8 \ud53c\ub77c\ubbf8\ub4dc 3\uce35 \ucee8\uc149 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/section>\n\n<div class=\"container\">\n<article>\n\n<p>&#8220;\ud14c\uc2a4\ud2b8\ub294 \uc0ac\uce58\ud488\uc774\uc9c0 \uc2dc\uac04 \ubd80\uc871\ud560 \ub54c \ube7c\ub294 \uac70 \uc544\ub2cc\uac00?&#8221; \u2014 \ud55c \ubc88 production \uc5d0\uc11c \uacb0\uc81c \ub85c\uc9c1 \ud68c\uadc0 \uc0ac\uace0 \ub098\uba74 \uc601\uc6d0\ud788 \uadf8 \ub9d0\uc774 \uc548 \ub098\uc628\ub2e4. \ud55c \ubc88 \uc9dc\uba74 \ub9e4 PR \ub9c8\ub2e4 \uc790\ub3d9\uc73c\ub85c \ud68c\uadc0 \uac80\uc0ac. \uc0ac\ub78c\uc774 \ub9e4\ubc88 \ud074\ub9ad\ud560 \ud544\uc694 \uc5c6\uc74c.<\/p>\n\n<p>Next.js \uc9c4\uc601\uc758 \ud45c\uc900\uc740 3\uce35 \u2014 <strong>Vitest<\/strong>(\uc720\ub2db), <strong>React Testing Library<\/strong>(\ucef4\ud3ec\ub10c\ud2b8), <strong>Playwright<\/strong>(E2E). \uc61b Jest \uc790\ub9ac\ub294 \ube60\ub974\uace0 ESM \uce5c\ud654\uc801\uc778 Vitest \uac00 \ub300\uccb4. \uc774\ubc88 \ud3b8\uc740 \uccab \uc138\ud305\uacfc \ud575\uc2ec \ud328\ud134.<\/p>\n\n<h2>1. \ud14c\uc2a4\ud2b8 \ud53c\ub77c\ubbf8\ub4dc \u2014 \ube44\uc728\uc774 \ud575\uc2ec<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n<thead><tr><th>\uce35<\/th><th>\ub3c4\uad6c<\/th><th>\uc18d\ub3c4<\/th><th>\ube44\uc728<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>\uc720\ub2db<\/td><td data-label=\"\ub3c4\uad6c\">Vitest<\/td><td data-label=\"\uc18d\ub3c4\">\ub9e4\uc6b0 \ube60\ub984 (ms)<\/td><td data-label=\"\ube44\uc728\">70%<\/td><\/tr>\n<tr><td>\ucef4\ud3ec\ub10c\ud2b8<\/td><td data-label=\"\ub3c4\uad6c\">RTL + Vitest<\/td><td data-label=\"\uc18d\ub3c4\">\ube60\ub984 (100ms)<\/td><td data-label=\"\ube44\uc728\">25%<\/td><\/tr>\n<tr><td>E2E<\/td><td data-label=\"\ub3c4\uad6c\">Playwright<\/td><td data-label=\"\uc18d\ub3c4\">\ub290\ub9bc (\uc218\ucd08)<\/td><td data-label=\"\ube44\uc728\">5%<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<p>\ube44\uc728\uc774 \uac70\uafb8\ub85c\uba74(E2E \uac00 \uac00\uc7a5 \ub9ce\uc74c) <strong>\uc544\uc774\uc2a4\ud06c\ub9bc \ucf58<\/strong> \uc548\ud2f0\ud328\ud134 \u2014 CI \uac00 30\ubd84 \uac78\ub9ac\uace0 flaky \ud55c \uc0ac\uace0. \uc720\ub2db\uc774 \ub9ce\uc544\uc57c \ube60\ub974\uace0 \ub2e8\ub2e8.<\/p>\n\n<h2>2. Vitest \u2014 \uc720\ub2db \ud14c\uc2a4\ud2b8 \uccab \uc138\ud305<\/h2>\n\n<div class=\"code-block\">$ npm install -D vitest @vitejs\/plugin-react jsdom @testing-library\/react @testing-library\/jest-dom<\/div>\n\n<div class=\"code-block\">\/\/ vitest.config.ts\nimport { defineConfig } from &#8216;vitest\/config&#8217;;\nimport react from &#8216;@vitejs\/plugin-react&#8217;;\n\nexport default defineConfig({\n  plugins: [react()],\n  test: {\n    environment: &#8216;jsdom&#8217;,\n    globals: true,\n    setupFiles: [&#8216;.\/vitest.setup.ts&#8217;],\n  },\n});\n\n\/\/ vitest.setup.ts\nimport &#8216;@testing-library\/jest-dom\/vitest&#8217;;<\/div>\n\n<div class=\"code-block\">\/\/ lib\/utils.test.ts\nimport { describe, it, expect } from &#8216;vitest&#8217;;\nimport { formatPrice } from &#8216;.\/utils&#8217;;\n\ndescribe(&#8216;formatPrice&#8217;, () =&gt; {\n  it(&#8216;\uc6d0\ud654 \ud3ec\ub9f7 \uc801\uc6a9&#8217;, () =&gt; {\n    expect(formatPrice(1234567)).toBe(&#8216;\u20a91,234,567&#8217;);\n  });\n\n  it(&#8216;0 \ub3c4 \uc815\uc0c1 \ucc98\ub9ac&#8217;, () =&gt; {\n    expect(formatPrice(0)).toBe(&#8216;\u20a90&#8217;);\n  });\n});<\/div>\n\n<p><code>npm run vitest<\/code> \u2014 watch \ubaa8\ub4dc\ub85c \ud30c\uc77c \ubcc0\uacbd \uc2dc \uc790\ub3d9 \uc7ac\uc2e4\ud589. \uc720\ub2db\uc740 \ube60\ub974\ub2c8\uae4c IDE \uc606\uc5d0 \ub744\uc6cc\ub450\uace0 \uac1c\ubc1c.<\/p>\n\n<h2>3. React Testing Library \u2014 \ucef4\ud3ec\ub10c\ud2b8 \ud14c\uc2a4\ud2b8<\/h2>\n\n<p>\ud575\uc2ec \ucca0\ud559 \u2014 <strong>\uc0ac\uc6a9\uc790\uac00 \ubcf4\ub294 \ub300\ub85c \ud14c\uc2a4\ud2b8<\/strong>. \uad6c\ud604 \ub514\ud14c\uc77c\uc774 \uc544\ub2c8\ub77c \uc0ac\uc6a9\uc790 \uacbd\ud5d8.<\/p>\n\n<div class=\"code-block\">\/\/ Counter.test.tsx\nimport { render, screen } from &#8216;@testing-library\/react&#8217;;\nimport userEvent from &#8216;@testing-library\/user-event&#8217;;\nimport { describe, it, expect } from &#8216;vitest&#8217;;\nimport { Counter } from &#8216;.\/Counter&#8217;;\n\ndescribe(&#8216;Counter&#8217;, () =&gt; {\n  it(&#8216;\ubc84\ud2bc \ud074\ub9ad \uc2dc \uce74\uc6b4\ud2b8 \uc99d\uac00&#8217;, async () =&gt; {\n    const user = userEvent.setup();\n    render(&lt;Counter \/&gt;);\n\n    const button = screen.getByRole(&#8216;button&#8217;, { name: \/\uc99d\uac00\/i });\n    expect(screen.getByText(&#8216;0&#8217;)).toBeInTheDocument();\n\n    await user.click(button);\n    expect(screen.getByText(&#8216;1&#8217;)).toBeInTheDocument();\n  });\n});<\/div>\n\n<div class=\"databox\">\n<strong>\ud575\uc2ec \uc6d0\uce59<\/strong> \u2014 <code>getByRole<\/code>\u00b7<code>getByLabelText<\/code> \uc6b0\uc120, <code>getByTestId<\/code> \ub294 \ucd5c\ud6c4. role\/label \ub85c \ucc3e\uc73c\uba74 \uc811\uadfc\uc131\ub3c4 \uc790\ub3d9 \uac80\uc99d\ub418\ub294 \ud6a8\uacfc. <code>data-testid=\"x\"<\/code> \ubc15\ub294 \uac74 \ub2e4\ub978 \ubc29\ubc95 \ub2e4 \uc548 \ub420 \ub54c\ub9cc.\n<\/div>\n\n<h2>4. Playwright \u2014 E2E \ud14c\uc2a4\ud2b8<\/h2>\n\n<p>\uc9c4\uc9dc \ube0c\ub77c\uc6b0\uc800(Chromium\u00b7Firefox\u00b7WebKit) \ub744\uc6cc \uc2e4\uc81c \uc0ac\uc6a9\uc790\ucc98\ub7fc \ud074\ub9ad\u00b7\uc785\ub825. \uac00\uc7a5 \ub290\ub9ac\uc9c0\ub9cc \uac00\uc7a5 \uc9c4\uc9dc.<\/p>\n\n<div class=\"code-block\">$ npm init playwright@latest<\/div>\n\n<div class=\"code-block\">\/\/ e2e\/login.spec.ts\nimport { test, expect } from &#8216;@playwright\/test&#8217;;\n\ntest(&#8216;\ub85c\uadf8\uc778 \ud6c4 \ub300\uc2dc\ubcf4\ub4dc \uc774\ub3d9&#8217;, async ({ page }) =&gt; {\n  await page.goto(&#8216;\/login&#8217;);\n  await page.getByLabel(&#8216;\uc774\uba54\uc77c&#8217;).fill(&#8216;user@example.com&#8217;);\n  await page.getByLabel(&#8216;\ube44\ubc00\ubc88\ud638&#8217;).fill(&#8216;password123&#8217;);\n  await page.getByRole(&#8216;button&#8217;, { name: &#8216;\ub85c\uadf8\uc778&#8217; }).click();\n\n  await expect(page).toHaveURL(&#8216;\/dashboard&#8217;);\n  await expect(page.getByRole(&#8216;heading&#8217;, { name: \/\ud658\uc601\ud569\ub2c8\ub2e4\/ })).toBeVisible();\n});<\/div>\n\n<p>\uc2e4\ud589 \u2014 <code>npx playwright test<\/code>. \uc2e4\ud328 \uc2dc <strong>\uc2a4\ud06c\ub9b0\uc0f7\u00b7\ube44\ub514\uc624\u00b7\ud2b8\ub808\uc774\uc2a4<\/strong>\uae4c\uc9c0 \uc790\ub3d9 \uc800\uc7a5. <code>--ui<\/code> \ud50c\ub798\uadf8 \ubd99\uc774\uba74 \uc778\ud130\ub799\ud2f0\ube0c UI \ub85c \ub2e8\uacc4\ubcc4 \ub514\ubc84\uae45.<\/p>\n\n<h2>5. CI \ud1b5\ud569\u00b7\uc2e4\uc804 \uad8c\uc7a5<\/h2>\n\n<p>GitHub Actions \ud45c\uc900 \ud328\ud134.<\/p>\n\n<div class=\"code-block\"># .github\/workflows\/test.yml\nname: Test\non: [push, pull_request]\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      &#8211; uses: actions\/checkout@v4\n      &#8211; uses: actions\/setup-node@v4\n        with:\n          node-version: 22\n          cache: npm\n      &#8211; run: npm ci\n      &#8211; run: npm run vitest &#8212; &#8211;run    # \uc720\ub2db\u00b7\ucef4\ud3ec\ub10c\ud2b8\n      &#8211; run: npx playwright install &#8211;with-deps\n      &#8211; run: npx playwright test         # E2E\n      &#8211; uses: actions\/upload-artifact@v4\n        if: failure()\n        with:\n          name: playwright-report\n          path: playwright-report\/<\/div>\n\n<p>\uc2e4\ud328 \uc2dc Playwright HTML \ub9ac\ud3ec\ud2b8\ub97c \uc790\ub3d9 \uc5c5\ub85c\ub4dc. PR \uc5d0\uc11c \ub2e4\uc6b4\ubc1b\uc544 \uc5b4\ub514\uc11c \uae68\uc84c\ub294\uc9c0 \ud655\uc778.<\/p>\n\n<div class=\"warnbox\">\n<strong>\uc2e4\uc804 \uad8c\uc7a5 \u2014 \ucc98\uc74c\ubd80\ud130 100% \ucee4\ubc84\ub9ac\uc9c0 \ub178\ub9ac\uc9c0 \ub9d0 \uac83<\/strong> \u2014 \uac00\uc7a5 \uc911\uc694\ud55c \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1 5\uac00\uc9c0\u00b7\uacb0\uc81c\u00b7\uc778\uc99d \ud750\ub984 \uc704\uc8fc\ub85c. \uc2dc\uac04 \ub0a8\uc73c\uba74 \ud655\uc7a5. 100% \ucee4\ubc84\ub9ac\uc9c0\uc5d0 \uac07\ud600 \ud14c\uc2a4\ud2b8 \uc9dc\ub2e4 \uc815\uc791 \uae30\ub2a5 \ubabb \ub9cc\ub4dc\ub294 \uac8c \ub354 \ud070 \uc0ac\uace0.\n<\/div>\n\n<h3>\uc694\uc57d \u2014 22\ud3b8 \uc88c\ud45c<\/h3>\n\n<p>\uc5ec\uae30\uae4c\uc9c0 \uc815\ub9ac. 3\uce35 \u2014 <strong>Vitest<\/strong>(\uc720\ub2db 70%) \u2192 <strong>RTL + Vitest<\/strong>(\ucef4\ud3ec\ub10c\ud2b8 25%) \u2192 <strong>Playwright<\/strong>(E2E 5%). RTL \uc740 <code>getByRole<\/code>\u00b7<code>getByLabelText<\/code> \uc6b0\uc120, testid \ub294 \ucd5c\ud6c4. Playwright \ub294 \uc2e4\ud328 \uc2dc \uc2a4\ud06c\ub9b0\uc0f7\u00b7\ube44\ub514\uc624\u00b7\ud2b8\ub808\uc774\uc2a4 \uc790\ub3d9 \uc800\uc7a5 \u2014 \ub514\ubc84\uae45 \uce5c\ud654\uc801. CI \uc5d0\uc11c \ub450 \ub2e8\uacc4\ub85c \ubd84\ub9ac. \uacb0\uc81c\u00b7\uc778\uc99d \ub4f1 \ud575\uc2ec \ud750\ub984\ubd80\ud130 \uc6b0\uc120 \ucee4\ubc84. \ub2e4\uc74c \ud3b8\uc5d0\uc11c <strong>Pages \u2192 App Router \ub9c8\uc774\uadf8\ub808\uc774\uc158<\/strong>.<\/p>\n\n<div class=\"cta\">\n<h3>\ub2e4\uc74c \ud3b8 \uc608\uace0 \u2014 Pages \u2192 App Router<\/h3>\n<p>\uc61b \ucf54\ub4dc \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub2e8\uacc4\ubcc4 \uac00\uc774\ub4dc. 23\ud3b8.<\/p>\n<\/div>\n\n<div class=\"footer-nav\">\n\uc2dc\ub9ac\uc988 \u00b7 <a href=\"https:\/\/junai.ai\/blog\/category\/nextjs\/\">\uc27d\uac8c \ubc30\uc6b0\ub294 Next.js<\/a> \u00b7 \uc774\uc804: <a href=\"https:\/\/junai.ai\/blog\/nextjs-analytics-seo-21\/\">Ch.21 Analytics\u00b7SEO<\/a>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Next.js \ud14c\uc2a4\ud2b8 3\uce35 \u2014 Vitest \uc720\ub2db\u00b7RTL \ucef4\ud3ec\ub10c\ud2b8\u00b7Playwright E2E. \uccab \uc138\ud305\uacfc \ud328\ud134. \uad50\uc7ac 22\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":857,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-910","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/910","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=910"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/910\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/857"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}