chore: add editor onboarding config #14
hoainhoAnnotations
10 errors and 2 warnings
|
src/__tests__/IssueCard.test.tsx > IssueCard > Learn More Link > link opens in new tab:
src/__tests__/IssueCard.test.tsx#L265
TestingLibraryElementError: Unable to find an element with the text: 📚 Learn more. 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>
<div
class="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
class="issue-header"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Missing Key in List
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="element-type"
>
li
</span>
<span
class="issue-component"
>
in
<strong>
UserList
</strong>
</span>
<span
class="component-path"
>
(
App → Dashboard → UserList
)
</span>
</div>
</div>
<button
class="expand-button"
>
▼
</button>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
List items are missing key props which can cause incorrect rendering
</p>
<div
class="issue-elements"
>
<strong>
Affected Elements:
</strong>
<div
class="elements-list"
>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
0
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
1
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
2
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
</div>
</div>
<div
class="issue-why"
>
<strong>
Why this matters:
</strong>
<p>
Keys help React identify which items have changed, are added, or removed.
</p>
</div>
<div
class="issue-suggestion"
>
<strong>
<span
class="action-badge action-badge--suggestion"
/>
Suggestion:
</strong>
<p>
Add a unique key prop to each list item
</p
|
|
src/__tests__/IssueCard.test.tsx > IssueCard > Learn More Link > displays learn more link when available:
src/__tests__/IssueCard.test.tsx#L256
TestingLibraryElementError: Unable to find an element with the text: 📚 Learn more. 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>
<div
class="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
class="issue-header"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Missing Key in List
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="element-type"
>
li
</span>
<span
class="issue-component"
>
in
<strong>
UserList
</strong>
</span>
<span
class="component-path"
>
(
App → Dashboard → UserList
)
</span>
</div>
</div>
<button
class="expand-button"
>
▼
</button>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
List items are missing key props which can cause incorrect rendering
</p>
<div
class="issue-elements"
>
<strong>
Affected Elements:
</strong>
<div
class="elements-list"
>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
0
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
1
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
2
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
</div>
</div>
<div
class="issue-why"
>
<strong>
Why this matters:
</strong>
<p>
Keys help React identify which items have changed, are added, or removed.
</p>
</div>
<div
class="issue-suggestion"
>
<strong>
<span
class="action-badge action-badge--suggestion"
/>
Suggestion:
</strong>
<p>
Add a unique key prop to each list item
</p
|
|
src/__tests__/IssueCard.test.tsx > IssueCard > Stale Closure Info > displays closure timeline:
src/__tests__/IssueCard.test.tsx#L197
TestingLibraryElementError: Unable to find an element with the text: 🔍 Closure Timeline:. 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>
<div
class="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
class="issue-header"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Stale Closure Detected
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="issue-component"
>
in
<strong>
Timer
</strong>
</span>
<span
class="component-path"
>
(
App → Timer
)
</span>
</div>
</div>
<button
class="expand-button"
>
▼
</button>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
Callback is using stale closure values
</p>
<div
class="closure-info"
>
<strong>
<span
class="action-badge action-badge--search"
/>
Closure Timeline:
</strong>
<div
class="closure-timeline"
>
<div
class="timeline-item created"
>
<span
class="timeline-badge"
>
Created
</span>
<span
class="timeline-detail"
>
Render #
1
</span>
</div>
<div
class="timeline-arrow"
>
→
</div>
<div
class="timeline-item executed"
>
<span
class="timeline-badge warning"
>
Executed
</span>
<span
class="timeline-detail"
>
Render #
10
</span>
</div>
</div>
<div
class="closure-details"
>
<div
class="closure-row"
>
<span
class="closure-label"
>
Function:
</span>
<code
class="closure-value"
>
handleTick
()
</code>
</div>
<div
class="closure-row"
>
<span
class="closure-label"
>
Type:
</span>
<span
class="closure-type type-setInterval"
>
setInterval
</span>
</div>
<div
class="closure-row"
>
<span
class="closure-label"
>
Renders behind:
</span>
<span
class="closure-stale-count"
>
9
render(s)
</span>
</div>
</div>
<div
class="captured-values"
>
<strong>
Potentially stale v
|
|
src/__tests__/IssueCard.test.tsx > IssueCard > Expansion > shows suggestion when expanded:
src/__tests__/IssueCard.test.tsx#L141
TestingLibraryElementError: Unable to find an element with the text: 💡 Suggestion:. 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>
<div
class="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
class="issue-header"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Missing Key in List
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="element-type"
>
li
</span>
<span
class="issue-component"
>
in
<strong>
UserList
</strong>
</span>
<span
class="component-path"
>
(
App → Dashboard → UserList
)
</span>
</div>
</div>
<button
class="expand-button"
>
▼
</button>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
List items are missing key props which can cause incorrect rendering
</p>
<div
class="issue-elements"
>
<strong>
Affected Elements:
</strong>
<div
class="elements-list"
>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
0
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
1
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
2
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
</div>
</div>
<div
class="issue-why"
>
<strong>
Why this matters:
</strong>
<p>
Keys help React identify which items have changed, are added, or removed.
</p>
</div>
<div
class="issue-suggestion"
>
<strong>
<span
class="action-badge action-badge--suggestion"
/>
Suggestion:
</strong>
<p>
Add a unique key prop to each list item
</
|
|
src/__tests__/CLSTab.test.tsx > CLSTab > CLS Tips > shows specific tips:
src/__tests__/CLSTab.test.tsx#L164
TestingLibraryElementError: Unable to find an element with the text: 💡 How to Reduce CLS. 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>
<div
class="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.050
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 10%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IMG.hero-image
</code>
</td>
<td
class="shift-value"
>
0.0300
</td>
<td
class="occurrence-count"
>
2
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.banner
</code>
</td>
<td
class="shift-value"
>
0.0200
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
1:37:44 AM
</span>
<span
class="timeline-source"
>
DIV.banner
</span>
<span
|
|
src/__tests__/CLSTab.test.tsx > CLSTab > CLS Tips > displays how to reduce CLS section:
src/__tests__/CLSTab.test.tsx#L159
TestingLibraryElementError: Unable to find an element with the text: 💡 How to Reduce CLS. 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>
<div
class="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.050
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 10%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IMG.hero-image
</code>
</td>
<td
class="shift-value"
>
0.0300
</td>
<td
class="occurrence-count"
>
2
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.banner
</code>
</td>
<td
class="shift-value"
>
0.0200
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
1:37:44 AM
</span>
<span
class="timeline-source"
>
DIV.banner
</span>
<span
|
|
src/__tests__/CLSTab.test.tsx > CLSTab > CLS Score Display > shows poor rating message:
src/__tests__/CLSTab.test.tsx#L100
TestingLibraryElementError: Unable to find an element with the text: 🔴. 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>
<div
class="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(255, 78, 66);"
>
0.350
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 70%; background-color: rgb(255, 78, 66);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--poor"
/>
<span
class="rating-text"
>
Poor - Significantly impacts user experience
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IFRAME.embed
</code>
</td>
<td
class="shift-value"
>
0.2000
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.ad-container
</code>
</td>
<td
class="shift-value"
>
0.1500
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
1:37:46 AM
</span>
<span
class="timeline-source"
>
IFRAME.embed
</span>
<span
|
|
src/__tests__/CLSTab.test.tsx > CLSTab > CLS Score Display > shows needs improvement rating message:
src/__tests__/CLSTab.test.tsx#L94
TestingLibraryElementError: Unable to find an element with the text: 🟡. 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>
<div
class="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(255, 164, 0);"
>
0.150
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 30%; background-color: rgb(255, 164, 0);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--warning"
/>
<span
class="rating-text"
>
Needs Improvement - Consider optimizing
</span>
</div>
</div>
</section>
<section
class="section info-section"
>
<h3>
<span
class="action-badge action-badge--suggestion"
/>
How to Reduce CLS
</h3>
<ul
class="tips-list"
>
<li>
Add
<code>
width
</code>
and
<code>
height
</code>
attributes to images and videos
</li>
<li>
Use
<code>
aspect-ratio
</code>
CSS property for responsive media
</li>
<li>
Reserve space for ads, embeds, and iframes with
<code>
min-height
</code>
</li>
<li>
Preload fonts and use
<code>
font-display: swap
</code>
</li>
<li>
Avoid inserting content above existing content
</li>
<li>
Use CSS
<code>
transform
</code>
for animations instead of layout properties
</li>
</ul>
</section>
<div
class="empty-state"
>
<span
class="empty-state-icon empty-state-icon--chart"
/>
<p>
No layout shifts detected yet
</p>
<p
class="hint"
>
Layout shifts will be recorded as they occur.
</p>
</div>
</div>
</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
❯ src/__tests__/CLSTab.test.tsx:94:21
|
|
src/__tests__/CLSTab.test.tsx > CLSTab > CLS Score Display > shows good rating message:
src/__tests__/CLSTab.test.tsx#L88
TestingLibraryElementError: Unable to find an element with the text: 🟢. 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>
<div
class="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.050
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 10%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IMG.hero-image
</code>
</td>
<td
class="shift-value"
>
0.0300
</td>
<td
class="occurrence-count"
>
2
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.banner
</code>
</td>
<td
class="shift-value"
>
0.0200
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
1:37:44 AM
</span>
<span
class="timeline-source"
>
DIV.banner
</span>
<span
class="
|
|
src/__tests__/CLSTab.test.tsx > CLSTab > Rendering > renders tab header correctly:
src/__tests__/CLSTab.test.tsx#L71
TestingLibraryElementError: Unable to find an element with the text: 📐 Layout Shift (CLS) Monitor. 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>
<div
class="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.000
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 0%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section info-section"
>
<h3>
<span
class="action-badge action-badge--suggestion"
/>
How to Reduce CLS
</h3>
<ul
class="tips-list"
>
<li>
Add
<code>
width
</code>
and
<code>
height
</code>
attributes to images and videos
</li>
<li>
Use
<code>
aspect-ratio
</code>
CSS property for responsive media
</li>
<li>
Reserve space for ads, embeds, and iframes with
<code>
min-height
</code>
</li>
<li>
Preload fonts and use
<code>
font-display: swap
</code>
</li>
<li>
Avoid inserting content above existing content
</li>
<li>
Use CSS
<code>
transform
</code>
for animations instead of layout properties
</li>
</ul>
</section>
<div
class="empty-state"
>
<span
class="empty-state-icon empty-state-icon--chart"
/>
<p>
No layout shifts detected yet
</p>
<p
class="hint"
>
Layout shifts will be recorded as they occur.
</p>
</div>
</div>
</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
❯ src/__tests__/CLSTab.test.tsx:71:21
|
|
Build + Test
Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/setup-node@v4. Actions will be forced to run with Node.js 24 by default starting June 16th, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
Build + Test
Pre-existing test debt detected. Some tests fail because they assert against emoji characters removed in v2.0.0. See CONTRIBUTING.md 'Known test debt' section. This does NOT block your PR — fixing one of these tests is a great first contribution.
|