The baseline is taller and thinner than the new snapshot (1168x826 to 1333x391).
Fail
Unable to find an element with the text: Notification has been disabled. 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
class="sb-main-padded sb-show-main"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/writing-stories/decorators"
>
Decorators documentation
</a>
.
</li>
<li>
<strong>
Misconfigured Webpack or Vite
</strong>
: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a
href="https://storybook.js.org/docs/builders/webpack"
>
Webpack
</a>
or
<a
href="https://storybook.js.org/docs/builders/vite"
>
Vite
</a>
with Storybook.
</li>
<li>
<strong>
Missing Environment Variables
</strong>
: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>
Environment Variables documentation
</a>
.
</li>
</ol>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
</div>
<div
id="storybook-root"
>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
useLocation() may be used only in the context of a <Router> component.
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
Error: useLocation() may be used only in the context of a <Router> component.
at w (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:60)
at L (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:7227)
at ur (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:17110)
at _e (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/NotificationsPage.stories-n1bbb_B_.js:1:5029)
at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343)
at Of (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:63243)
at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:73938)
at Sv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:115220)
at My (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114335)
at Jc (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114173)
</pre>
</div>
<div
hidden="true"
id="storybook-docs"
/>
</body>
Ignored nodes: comments, script, style
<body
class="sb-main-padded sb-show-main"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/writing-stories/decorators"
>
Decorators documentation
</a>
.
</li>
<li>
<strong>
Misconfigured Webpack or Vite
</strong>
: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a
href="https://storybook.js.org/docs/builders/webpack"
>
Webpack
</a>
or
<a
href="https://storybook.js.org/docs/builders/vite"
>
Vite
</a>
with Storybook.
</li>
<li>
<strong>
Missing Environment Variables
</strong>
: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>
Environment Variables documentation
</a>
.
</li>
</ol>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
</div>
<div
id="storybook-root"
>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
useLocation() may be used only in the context of a <Router> component.
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
Error: useLocation() may be used only in the context of a <Router> component.
at w (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:60)
at L (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:7227)
at ur (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:17110)
at _e (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/NotificationsPage.stories-n1bbb_B_.js:1:5029)
at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343)
at Of (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:63243)
at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:73938)
at Sv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:115220)
at My (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114335)
at Jc (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114173)
</pre>
</div>
<div
hidden="true"
id="storybook-docs"
/>
</body>View in Storybook
Chrome 1211333x391
Linux Linux Ubuntu 20.04.4
34b4c1 on lilac/react-19
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find an element with the text: Notification has been disabled. 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
class="sb-main-padded sb-show-main"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/writing-stories/decorators"
>
Decorators documentation
</a>
.
</li>
<li>
<strong>
Misconfigured Webpack or Vite
</strong>
: Verify that Storybook picks up all necessary
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
guides for configuring
<a
href="https://storybook.js.org/docs/builders/webpack"
>
Webpack
</a>
or
<a
href="https://storybook.js.org/docs/builders/vite"
>
Vite
</a>
with Storybook.
</li>
<li>
<strong>
Missing Environment Variables
</strong>
: Your Storybook may require specific
environment variables to function as intended. You can set up custom environment variables
as outlined in the
<a
href="https://storybook.js.org/docs/configure/environment-variables"
>
Environment Variables documentation
</a>
.
</li>
</ol>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
</div>
<div
id="storybook-root"
>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
useLocation() may be used only in the context of a <Router> component.
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
Error: useLocation() may be used only in the context of a <Router> component.
at w (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:60)
at L (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:10:7227)
at ur (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:17110)
at _e (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/NotificationsPage.stories-n1bbb_B_.js:1:5029)
at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343)
at Of (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:63243)
at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:73938)
at Sv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:115220)
at My (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114335)
at Jc (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:114173)
</pre>
</div>
<div
hidden="true"
id="storybook-docs"
/>
</body>
at kl (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:198:3338)
at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:206:234
at r_.invoke (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:8338)
at r_.intercept (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:5838)
at r_.track (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:5570)
at Object.findByText (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:4943)
at play (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/NotificationsPage.stories-n1bbb_B_.js:1:8192)
at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5985:60
at mn.runPhase (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5872:100)
at mn.render (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5985:25)