The baseline is larger than the new snapshot (1200x900 to 1199x391).
Fail
Unable to find an element with the text: /v2\.\d+\.\d+/i. 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;" > Cannot destructure property 'basename' of 'i.useContext(...)' as it is null. </h3> <pre style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);" > TypeError: Cannot destructure property 'basename' of 'i.useContext(...)' as it is null. at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:13750 at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343) at Oi (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:61414) at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:75833) 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) at yv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:111298) at ji (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:120814) at Jt (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:119611) </pre> </div> <div hidden="true" id="storybook-docs" /> </body>View in Storybook
Chrome 121
1199x391
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: /v2\.\d+\.\d+/i. 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;" > Cannot destructure property 'basename' of 'i.useContext(...)' as it is null. </h3> <pre style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);" > TypeError: Cannot destructure property 'basename' of 'i.useContext(...)' as it is null. at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/chunk-D52XG6IA-BnRncTPB.js:12:13750 at de (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:42343) at Oi (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:61414) at L1 (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:75833) 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) at yv (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:111298) at ji (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:120814) at Jt (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/react-18-Dk34_oWq.js:24:119611) </pre> </div> <div hidden="true" id="storybook-docs" /> </body> at Object.kl [as waitFor] (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:198:3338) at r_.invoke (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:8338) at r_.track (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:5570) at waitFor (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/index-DSMIigBc.js:48:4943) at https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/UserDropdown.stories-DMZCp6_c.js:1:4103 at async https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5273:5 at async play (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/assets/UserDropdown.stories-DMZCp6_c.js:1:4026) at async mn.runPhase (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5872:94) at async mn.render (https://624de63c6aacee003aa84340-ptofxlrubo.capture-loopback.chromatic.com/sb-preview/runtime.js:5985:14)