52 KiB
52 KiB
> find-word@0.1.0 test
> vitest run tests/App.test.tsx -t 시작 안내
RUN v5.0.4 /home/hermes/worktrees/find-word-v0.1
❯ tests/App.test.tsx (13 tests | 3 failed | 10 skipped) 455ms
❯ 시작부터 결과까지 사용자 흐름 (13)
× 시작 안내는 장식 번호 대신 8가지 환경을 표시한다 93ms
× 시작 안내의 현재 페이지 링크는 아래 화살표를 표시한다 134ms
× 시작 안내의 CTA는 게임 시작과 소리 재생을 함께 알린다 226ms
⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 시작 안내는 장식 번호 대신 8가지 환경을 표시한다
TestingLibraryElementError: Unable to find an element with the text: 8가지 환경. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1
</span>
</div>
<div
class="header-actions"
>
<a
href="#howto"
>
플레이 방법
<span
aria-hidden="true"
>
↗
</span>
</a>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-labelledby="hero-title"
class="hero"
>
<div
class="hero-copy"
>
<p
class="eyebrow"
>
<span />
귀를 기울이면, 발견하는 즐거움
</p>
<h2
id="hero-title"
>
소음 속 작은 단어,
<br />
<em>
들리시나요?
</em>
</h2>
<p
class="lead"
>
도시의 소리 사이에 에스가 숨겨 둔 단어.
<br />
조금 더 귀 기울여, 오늘의 행운을 찾아보세요.
</p>
<div
class="hero-meta"
>
<span>
10개의 질문
</span>
<span>
5단계 도전
</span>
<span>
나만의 속도로
</span>
</div>
</div>
<div
class="sound-room"
>
<div
class="room-top"
>
<span>
<i />
에스의 사운드 룸
</span>
<span>
01 / 08
</span>
</div>
<div
class="orbit orbit-one"
/>
<div
class="orbit orbit-two"
/>
<span
aria-hidden="true"
class="floating-note note-one"
>
♪
</span>
<span
aria-hidden="true"
class="floating-note note-two"
>
✳
</span>
<div
class="speech-bubble"
>
행운의 단어를 찾아보거라!
</div>
<div
aria-hidden="true"
class="mascot "
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
class="room-bottom"
>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<span>
소음 사이, 숨겨진 한마디
</span>
</div>
</div>
</section>
<section
aria-labelledby="setup-title"
class="setup-card"
>
<div
class="setup-heading"
>
<span
class="section-number"
>
01
</span>
<div>
<h2
id="setup-title"
>
나의 소리 탐험 준비
</h2>
<p>
편한 방식으로 시작하세요. 난이도는 조금씩 높아져요.
</p>
</div>
<span
class="round-badge"
>
약 3–5분
</span>
</div>
<div
class="setup-grid"
>
<fieldset
class="mode-field"
>
<legend>
어떻게 답할까요?
</legend>
<div
class="mode-options"
>
<label
class="mode-option selected"
>
<input
aria-label="골고루 풀기"
checked=""
name="mode"
type="radio"
value="mixed"
/>
<span
aria-hidden="true"
class="mode-icon"
>
◈
</span>
<strong>
골고루 풀기
</strong>
<small>
선택 + 직접 입력
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="보기에서 선택"
name="mode"
type="radio"
value="choice"
/>
<span
aria-hidden="true"
class="mode-icon"
>
☷
</span>
<strong>
보기에서 선택
</strong>
<small>
4개 단어 중 하나
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="직접 입력"
name="mode"
type="radio"
value="text"
/>
<span
aria-hidden="true"
class="mode-icon"
>
✎
</span>
<strong>
직접 입력
</strong>
<small>
기억한 단어 쓰기
</small>
</label>
</div>
</fieldset>
<div
class="environment-field"
>
<label
for="environment"
>
배경 환경
</label>
<select
id="environment"
>
<option
value="rotate"
>
여덟 가지 일상 속으로
</option>
<option
value="street"
>
길거리
</option>
<option
value="mall"
>
쇼핑몰
</option>
<option
value="theater"
>
극장
</option>
<option
value="department"
>
백화점
</option>
<option
value="market"
>
시장
</option>
<option
value="subway"
>
지하철
</option>
<option
value="cafe"
>
카페
</option>
<option
value="rain"
>
비 오는 거리
</option>
</select>
<p>
길거리부터 비 오는 거리까지, 매번 다른 공간을 만나요.
</p>
<div
class="environment-chips"
>
<span>
길거리
</span>
<span>
카페
</span>
<span>
지하철
</span>
<span>
+5개 환경
</span>
</div>
</div>
</div>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="start-row"
>
<p>
<span
aria-hidden="true"
>
♬
</span>
편안한 작은 음량으로 시작해 보세요.
</p>
<button
class="primary"
>
소리 시작
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</section>
<section
aria-labelledby="howto-title"
class="howto"
id="howto"
>
<h2
id="howto-title"
>
작은 단어를 발견하는 방법
</h2>
<div
class="steps"
>
<article>
<span>
01
</span>
<h3>
먼저, 귀 기울이기
</h3>
<p>
에스의 안내와 소음 속 문장을 들어요.
<br />
처음에는 또렷하게, 점점 더 작게.
</p>
</article>
<article>
<span>
02
</span>
<h3>
기억한 단어 찾기
</h3>
<p>
소리가 끝나면 질문이 나타나요.
<br />
보기에서 고르거나 직접 입력해요.
</p>
</article>
<article>
<span>
03
</span>
<h3>
나의 발견 돌아보기
</h3>
<p>
열 문제 뒤 나의 결과를 확인해요.
<br />
놓쳤다면 언제든 다시 들어도 좋아요.
</p>
</article>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at HearT-M Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:50:19
48| it("시작 안내는 장식 번호 대신 8가지 환경을 표시한다", () => {
49| fixture();
50| expect(screen.getByText("8가지 환경", { exact: true })).toBeInTheDocum…
| ^
51| expect(screen.queryByText("01 / 08")).not.toBeInTheDocument();
52| });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 시작 안내의 현재 페이지 링크는 아래 화살표를 표시한다
Error: expect(element).toHaveTextContent()
Expected element to have text content:
플레이 방법 ↓
Received:
플레이 방법 ↗
❯ tests/App.test.tsx:57:18
55| const link = screen.getByRole("link", { name: "플레이 방법" });
56| expect(link).toHaveAttribute("href", "#howto");
57| expect(link).toHaveTextContent("플레이 방법 ↓");
| ^
58| expect(within(link).getByText("↓")).toHaveAttribute("aria-hidden",…
59| });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯
FAIL tests/App.test.tsx > 시작부터 결과까지 사용자 흐름 > 시작 안내의 CTA는 게임 시작과 소리 재생을 함께 알린다
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "게임 시작 · 소리 듣기"
Here are the accessible roles:
link:
Name "본문으로 건너뛰기":
<a
class="skip-link"
href="#main"
/>
Name "플레이 방법":
<a
href="#howto"
/>
--------------------------------------------------
banner:
Name "":
<header
class="header wrap"
/>
--------------------------------------------------
heading:
Name "단어를 맞춰라":
<h1 />
Name "소음 속 작은 단어,들리시나요?":
<h2
id="hero-title"
/>
Name "나의 소리 탐험 준비":
<h2
id="setup-title"
/>
Name "작은 단어를 발견하는 방법":
<h2
id="howto-title"
/>
Name "먼저, 귀 기울이기":
<h3 />
Name "기억한 단어 찾기":
<h3 />
Name "나의 발견 돌아보기":
<h3 />
--------------------------------------------------
main:
Name "":
<main
class="wrap"
id="main"
tabindex="-1"
/>
--------------------------------------------------
region:
Name "소음 속 작은 단어,들리시나요?":
<section
aria-labelledby="hero-title"
class="hero"
/>
Name "나의 소리 탐험 준비":
<section
aria-labelledby="setup-title"
class="setup-card"
/>
Name "작은 단어를 발견하는 방법":
<section
aria-labelledby="howto-title"
class="howto"
id="howto"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="eyebrow"
/>
Name "":
<p
class="lead"
/>
Name "":
<p />
Name "":
<p />
Name "":
<p />
Name "":
<p />
Name "":
<p />
Name "":
<p />
Name "":
<p />
Name "":
<p />
--------------------------------------------------
emphasis:
Name "":
<em />
--------------------------------------------------
group:
Name "어떻게 답할까요?":
<fieldset
class="mode-field"
/>
--------------------------------------------------
radio:
Name "골고루 풀기":
<input
aria-label="골고루 풀기"
checked=""
name="mode"
type="radio"
value="mixed"
/>
Name "보기에서 선택":
<input
aria-label="보기에서 선택"
name="mode"
type="radio"
value="choice"
/>
Name "직접 입력":
<input
aria-label="직접 입력"
name="mode"
type="radio"
value="text"
/>
--------------------------------------------------
strong:
Name "":
<strong />
Name "":
<strong />
Name "":
<strong />
--------------------------------------------------
combobox:
Name "배경 환경":
<select
id="environment"
/>
--------------------------------------------------
option:
Name "여덟 가지 일상 속으로":
<option
value="rotate"
/>
Name "길거리":
<option
value="street"
/>
Name "쇼핑몰":
<option
value="mall"
/>
Name "극장":
<option
value="theater"
/>
Name "백화점":
<option
value="department"
/>
Name "시장":
<option
value="market"
/>
Name "지하철":
<option
value="subway"
/>
Name "카페":
<option
value="cafe"
/>
Name "비 오는 거리":
<option
value="rain"
/>
--------------------------------------------------
slider:
Name "전체 음량":
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
--------------------------------------------------
status:
Name "":
<output
for="volume"
/>
--------------------------------------------------
button:
Name "소리 시작":
<button
class="primary"
/>
--------------------------------------------------
article:
Name "":
<article />
Name "":
<article />
Name "":
<article />
--------------------------------------------------
contentinfo:
Name "":
<footer
class="footer wrap"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<a
class="skip-link"
href="#main"
>
본문으로 건너뛰기
</a>
<header
class="header wrap"
>
<div
class="brand"
>
<span
aria-hidden="true"
class="brand-mark"
>
<i />
<i />
<i />
<i />
</span>
<h1>
단어를 맞춰라
</h1>
<span
class="version"
>
v0.1
</span>
</div>
<div
class="header-actions"
>
<a
href="#howto"
>
플레이 방법
<span
aria-hidden="true"
>
↗
</span>
</a>
<span
class="little-dot"
/>
소리에 집중하는 시간
</div>
</header>
<main
class="wrap"
id="main"
tabindex="-1"
>
<section
aria-labelledby="hero-title"
class="hero"
>
<div
class="hero-copy"
>
<p
class="eyebrow"
>
<span />
귀를 기울이면, 발견하는 즐거움
</p>
<h2
id="hero-title"
>
소음 속 작은 단어,
<br />
<em>
들리시나요?
</em>
</h2>
<p
class="lead"
>
도시의 소리 사이에 에스가 숨겨 둔 단어.
<br />
조금 더 귀 기울여, 오늘의 행운을 찾아보세요.
</p>
<div
class="hero-meta"
>
<span>
10개의 질문
</span>
<span>
5단계 도전
</span>
<span>
나만의 속도로
</span>
</div>
</div>
<div
class="sound-room"
>
<div
class="room-top"
>
<span>
<i />
에스의 사운드 룸
</span>
<span>
01 / 08
</span>
</div>
<div
class="orbit orbit-one"
/>
<div
class="orbit orbit-two"
/>
<span
aria-hidden="true"
class="floating-note note-one"
>
♪
</span>
<span
aria-hidden="true"
class="floating-note note-two"
>
✳
</span>
<div
class="speech-bubble"
>
행운의 단어를 찾아보거라!
</div>
<div
aria-hidden="true"
class="mascot "
>
<span
class="ear left"
/>
<span
class="ear right"
/>
<span
class="eye left"
/>
<span
class="eye right"
/>
<span
class="smile"
/>
<b>
S
</b>
</div>
<div
class="room-bottom"
>
<div
aria-hidden="true"
class="sound-wave "
>
<i
style="height: 10px; animation-delay: 0s;"
/>
<i
style="height: 33.799955450859244px; animation-delay: 0.05s;"
/>
<i
style="height: 16.132986448643948px; animation-delay: 0.1s;"
/>
<i
style="height: 32.219552375865575px; animation-delay: 0.15000000000000002s;"
/>
<i
style="height: 21.858720427326595px; animation-delay: 0.2s;"
/>
<i
style="height: 29.163690702963766px; animation-delay: 0.25s;"
/>
<i
style="height: 26.796992502245015px; animation-delay: 0.30000000000000004s;"
/>
<i
style="height: 24.835290693688798px; animation-delay: 0.35000000000000003s;"
/>
<i
style="height: 30.619883556555898px; animation-delay: 0.4s;"
/>
<i
style="height: 35.39139668035928px; animation-delay: 0.45s;"
/>
<i
style="height: 71.52943948029164px; animation-delay: 0.5s;"
/>
<i
style="height: 19.53593765210872px; animation-delay: 0.55s;"
/>
<i
style="height: 73.98674560913082px; animation-delay: 0.6000000000000001s;"
/>
<i
style="height: 16.952742107140878px; animation-delay: 0.65s;"
/>
<i
style="height: 72.19510052760725px; animation-delay: 0.7000000000000001s;"
/>
<i
style="height: 32.979734657418774px; animation-delay: 0.75s;"
/>
<i
style="height: 66.27347594564635px; animation-delay: 0.8s;"
/>
<i
style="height: 47.480789758355044px; animation-delay: 0.8500000000000001s;"
/>
<i
style="height: 56.615089141222136px; animation-delay: 0.9s;"
/>
<i
style="height: 59.492984932238116px; animation-delay: 0.9500000000000001s;"
/>
<i
style="height: 43.861291911681526px; animation-delay: 1s;"
/>
<i
style="height: 68.21866699734562px; animation-delay: 1.05s;"
/>
<i
style="height: 28.858982496016484px; animation-delay: 1.1s;"
/>
<i
style="height: 73.07841912260051px; animation-delay: 1.1500000000000001s;"
/>
<i
style="height: 12.60436847039135px; animation-delay: 1.2000000000000002s;"
/>
<i
style="height: 73.74953619965402px; animation-delay: 1.25s;"
/>
<i
style="height: 23.8231850360459px; animation-delay: 1.3s;"
/>
<i
style="height: 32.57029511072814px; animation-delay: 1.35s;"
/>
<i
style="height: 20.99981090780238px; animation-delay: 1.4000000000000001s;"
/>
<i
style="height: 29.735764963203792px; animation-delay: 1.4500000000000002s;"
/>
<i
style="height: 26.085500220240995px; animation-delay: 1.5s;"
/>
<i
style="height: 25.59070868046883px; animation-delay: 1.55s;"
/>
<i
style="height: 30.10305417152866px; animation-delay: 1.6s;"
/>
<i
style="height: 20.410372983416416px; animation-delay: 1.6500000000000001s;"
/>
<i
style="height: 32.785692656480826px; animation-delay: 1.7000000000000002s;"
/>
</div>
<span>
소음 사이, 숨겨진 한마디
</span>
</div>
</div>
</section>
<section
aria-labelledby="setup-title"
class="setup-card"
>
<div
class="setup-heading"
>
<span
class="section-number"
>
01
</span>
<div>
<h2
id="setup-title"
>
나의 소리 탐험 준비
</h2>
<p>
편한 방식으로 시작하세요. 난이도는 조금씩 높아져요.
</p>
</div>
<span
class="round-badge"
>
약 3–5분
</span>
</div>
<div
class="setup-grid"
>
<fieldset
class="mode-field"
>
<legend>
어떻게 답할까요?
</legend>
<div
class="mode-options"
>
<label
class="mode-option selected"
>
<input
aria-label="골고루 풀기"
checked=""
name="mode"
type="radio"
value="mixed"
/>
<span
aria-hidden="true"
class="mode-icon"
>
◈
</span>
<strong>
골고루 풀기
</strong>
<small>
선택 + 직접 입력
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="보기에서 선택"
name="mode"
type="radio"
value="choice"
/>
<span
aria-hidden="true"
class="mode-icon"
>
☷
</span>
<strong>
보기에서 선택
</strong>
<small>
4개 단어 중 하나
</small>
</label>
<label
class="mode-option "
>
<input
aria-label="직접 입력"
name="mode"
type="radio"
value="text"
/>
<span
aria-hidden="true"
class="mode-icon"
>
✎
</span>
<strong>
직접 입력
</strong>
<small>
기억한 단어 쓰기
</small>
</label>
</div>
</fieldset>
<div
class="environment-field"
>
<label
for="environment"
>
배경 환경
</label>
<select
id="environment"
>
<option
value="rotate"
>
여덟 가지 일상 속으로
</option>
<option
value="street"
>
길거리
</option>
<option
value="mall"
>
쇼핑몰
</option>
<option
value="theater"
>
극장
</option>
<option
value="department"
>
백화점
</option>
<option
value="market"
>
시장
</option>
<option
value="subway"
>
지하철
</option>
<option
value="cafe"
>
카페
</option>
<option
value="rain"
>
비 오는 거리
</option>
</select>
<p>
길거리부터 비 오는 거리까지, 매번 다른 공간을 만나요.
</p>
<div
class="environment-chips"
>
<span>
길거리
</span>
<span>
카페
</span>
<span>
지하철
</span>
<span>
+5개 환경
</span>
</div>
</div>
</div>
<div
class="volume-row"
>
<label
for="volume"
>
<span
aria-hidden="true"
>
◖))
</span>
전체 음량
</label>
<input
id="volume"
max="100"
min="0"
type="range"
value="35"
/>
<output
for="volume"
>
35
%
</output>
</div>
<div
class="start-row"
>
<p>
<span
aria-hidden="true"
>
♬
</span>
편안한 작은 음량으로 시작해 보세요.
</p>
<button
class="primary"
>
소리 시작
<span
aria-hidden="true"
>
→
</span>
</button>
</div>
</section>
<section
aria-labelledby="howto-title"
class="howto"
id="howto"
>
<h2
id="howto-title"
>
작은 단어를 발견하는 방법
</h2>
<div
class="steps"
>
<article>
<span>
01
</span>
<h3>
먼저, 귀 기울이기
</h3>
<p>
에스의 안내와 소음 속 문장을 들어요.
<br />
처음에는 또렷하게, 점점 더 작게.
</p>
</article>
<article>
<span>
02
</span>
<h3>
기억한 단어 찾기
</h3>
<p>
소리가 끝나면 질문이 나타나요.
<br />
보기에서 고르거나 직접 입력해요.
</p>
</article>
<article>
<span>
03
</span>
<h3>
나의 발견 돌아보기
</h3>
<p>
열 문제 뒤 나의 결과를 확인해요.
<br />
놓쳤다면 언제든 다시 들어도 좋아요.
</p>
</article>
</div>
</section>
</main>
<footer
class="footer wrap"
>
<p>
Designed by OZ at HearT-M Medical Inc.
</p>
<p>
청각적 주의·식별 게임 · 의료적 진단이나 치료를 제공하지 않습니다.
</p>
<span>
개인정보 수집 없이, 오직 플레이만.
</span>
</footer>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/App.test.tsx:62:26
60| it("시작 안내의 CTA는 게임 시작과 소리 재생을 함께 알린다", async () => {
61| const f = fixture();
62| const start = screen.getByRole("button", { name: "게임 시작 · 소리 듣기", …
| ^
63| expect(start).toHaveTextContent("게임 시작 · 소리 듣기");
64| expect(f.audio.play).not.toHaveBeenCalled();
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯
Test Files 1 failed (1)
Tests 3 failed | 10 skipped (13)
Start at 05:33:14
Duration 1.36s (environment 46%, tests 37%, setup 9%, transform 4%, import 3%, worker 1%)