Fix: Prevent Storybook UI HTML from polluting testing-library error messages by Copilot · Pull Request #34120 · storybookjs/storybook

Copilot · 2026-03-12T21:30:15Z

When screen queries fail (e.g., screen.getByText('...')), @testing-library/dom's default getElementError calls prettyDOM(container) where container is document.body. In Storybook, document.body contains the full Storybook UI markup, producing hundreds of lines of irrelevant HTML that buries the actual error.

Changes

code/core/src/test/testing-library.ts: Configure a custom getElementError via domTestingLibrary.configure() that skips the prettyDOM dump when container === document.body, while still including it for scoped containers (e.g., story canvas element).

domTestingLibrary.configure({
  getElementError(message: string | null, container: Element) {
    const prettifiedDOM =
      typeof document !== 'undefined' && container === document.body
        ? null  // skip — would dump entire Storybook UI
        : domTestingLibrary.prettyDOM(container);
    // ...
  },
});

This means errors from screen queries show only the relevant message, while errors from canvas/within queries still include the scoped DOM snapshot.

Original prompt

This section details on the original issue you should resolve

<issue_title>Poorly formatted HTML is inserted into Storybook errors, hiding real issues and filling the console with noise</issue_title>
<issue_description>

Discussed in #34118

^{Originally posted by rschristian March 12, 2026}

Summary

Every time a Storybook test fails, we get error messages like the following printed to the console. I've pasted the whole thing exactly as it is output:

Error: Timed out in waitFor.

Ignored nodes: comments, script, style
<html
  lang="en"
>
  <head>
    
    
    

    
    <meta
      charset="utf-8"
    />
    
    
    <title>
      storybook-test-name
    </title>
    
    
    <meta
      content="width=device-width, initial-scale=1"
      name="viewport"
    />
    

    
    

    
    
    
    <base
      target="_parent"
    />
    


    


    

  
  </head>
  

  
  <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"
 ...

</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

- Fixes storybookjs/storybook#34119

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 Send tasks to Copilot coding agent from [Slack](https://gh.io/cca-slack-docs) and [Teams](https://gh.io/cca-teams-docs) to turn conversations into code. Copilot posts an update in your thread when it's finished.

… testing-library errors Co-authored-by: valentinpalkovic <5889929+valentinpalkovic@users.noreply.github.com>

Initial plan

83518fa

Copilot AI assigned Copilot and valentinpalkovic Mar 12, 2026

Copilot started work on behalf of valentinpalkovic March 12, 2026 21:30 View session

Fix: Configure getElementError to avoid dumping full document.body in…

3adceec

… testing-library errors Co-authored-by: valentinpalkovic <5889929+valentinpalkovic@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix poorly formatted HTML in Storybook errors~~ Fix: Prevent Storybook UI HTML from polluting testing-library error messages Mar 12, 2026

Copilot AI requested a review from valentinpalkovic March 12, 2026 21:41

Copilot finished work on behalf of valentinpalkovic March 12, 2026 21:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: Prevent Storybook UI HTML from polluting testing-library error messages#34120

Fix: Prevent Storybook UI HTML from polluting testing-library error messages#34120
Copilot wants to merge 2 commits intonextfrom
copilot/fix-poorly-formatted-html-errors

Copilot AI commented Mar 12, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Copilot AI commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Discussed in #34118

Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Mar 12, 2026 •

edited

Loading