Skip to content

feat!: include shadow root contents in pretty-format output#8545

Merged
sheremet-va merged 5 commits intovitest-dev:mainfrom
wkillerud:pretty-format-shadow-root
Sep 10, 2025
Merged

feat!: include shadow root contents in pretty-format output#8545
sheremet-va merged 5 commits intovitest-dev:mainfrom
wkillerud:pretty-format-shadow-root

Conversation

@wkillerud
Copy link
Contributor

@wkillerud wkillerud commented Sep 6, 2025 •
edited
Loading

Makes it easier for web component authors to debug and snapshot test their components.

Description

Proposed fix for #8539

The PR extends pretty-format to include the contents of shadow roots similar to the inspector tool in browsers.

When used in snapshot tests:

// before
exports[`should handle shadow DOM content 1`] = `
"<body>
  <div>
    <custom-element />
  </div>
</body>"
`;

// after
exports[`should handle shadow DOM content 1`] = `
"<body>
  <div>
    <custom-element>
      #shadow-root
        <span
          class="some-name"
          data-test-id="33"
          id="5"
        >
          hello
        </span>
    </custom-element>
  </div>
</body>"
`;

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

  • It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
  • Ideally, include a test that fails without this PR but passes with it.
  • Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
  • Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

  • Run the tests with pnpm test:ci.

Documentation

  • If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

  • Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

@wkillerud
feat: include shadow root in pretty-format
c9e6b83 
Makes it easier for web component authors to debug and snapshot
test their components.
@wkillerud
Merge branch 'main' into pretty-format-shadow-root
10f0e39
@netlify
Copy link

netlify bot commented Sep 6, 2025

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit c9e6b83
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/68bc24bf936b020008ff6e7d
😎 Deploy Preview https://deploy-preview-8545--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@wkillerud
Copy link
Contributor Author

wkillerud commented Sep 6, 2025 •
edited
Loading

The documentation for snapshotFormat points to Jest's pretty-format, which isn't totally accurate now that the project uses its own fork. @vite/pretty-format doesn't have its own README yet that documents the different options.

I can perhaps add a README to pretty-format and update the references to it to document this new suggested option?

I could also drop the option for now and see if there's demand for it.

@wkillerud wkillerud mentioned this pull request Sep 6, 2025
Closed
4 tasks
@sheremet-va sheremet-va changed the title feat: include shadow root contents in pretty-format output feat!: include shadow root contents in pretty-format output Sep 8, 2025
@sheremet-va
Copy link
Member

sheremet-va commented Sep 8, 2025 •
edited
Loading

The documentation for snapshotFormat points to Jest's pretty-format, which isn't totally accurate now that the project uses its own fork. @vite/pretty-format doesn't have its own README yet that documents the different options.

I can perhaps add a README to pretty-format and update the references to it to document this new suggested option?

I could also drop the option for now and see if there's demand for it.

I'd say that adding that we also support printShadowRoot: boolean is enough. However I would also add a note in the migration guide that snapshots using custom elements will now print the shadow root and that disabling printShadowRoot will restore the previous behaviour

@netlify
Copy link

netlify bot commented Sep 9, 2025

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 30b29fd
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/68bfe55dc363e3000811669d
😎 Deploy Preview https://deploy-preview-8545--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Sep 9, 2025 •
edited
Loading

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 5a8f5ba
🔍 Latest deploy log https://app.netlify.com/projects/vitest-dev/deploys/68bfe86096153a0008a04813
😎 Deploy Preview https://deploy-preview-8545--vitest-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@sheremet-va sheremet-va merged commit 9e72283 into vitest-dev:main Sep 10, 2025
12 of 14 checks passed
@sheremet-va
Copy link
Member

sheremet-va commented Sep 10, 2025

Thank you!

This was referenced Nov 3, 2025
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sheremet-va sheremet-va sheremet-va approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@wkillerud @sheremet-va