Feature: Debug with Watch

[benguenter]

Which feature do you want to improve?

Debug should be able to watch for dom changes, so that we can put debug at the beginning of the test, and then have the latest dom represented at time of failure.

What and why you want to improve that feature

This is useful so that we don't need to move the debug statement around as the test fails. Additionally, this is useful when using things like the find* operators with testing library when it is polling for changes. Or when debugging tests.

Potential bugs/ unexpected behaviors

Possible unexpected behavior if the two modes are mixed. I.e. having this "watch debug" in one place, and then have a non-watch debug statement later on.

How to implement the changes

We could use a MutationObserver on the document element to watch for changes.

Something like this

Others

@nvh95 is this project still active? I'd love to open a PR for this feature, but it seems like there are a few PRs that have been open for a long time.

[nvh95]

Debug should be able to watch for dom changes, so that we can put debug at the beginning of the test, and then have the latest dom represented at time of failure.

Hi @benguenter, it will be the Automatic Mode in the future release, similar to what jest-preview's Automatic Mode.

But in the meantime, you can use this setup to watch the dom changes whenever a test fails, thanks to @BrandonGoren https://github.com/nvh95/vitest-preview/issues/21#issuecomment-1487474054

import { debug } from 'vitest-preview';
import { cleanup } from '@testing-library/react';

afterEach(context => {
  // Run vitest-preview's debug if the test fails
  if (context?.meta?.result?.state === 'fail') {
    debug();
  }
  // Clean up react-testing-library. We need to manually do this because we
  // turn off the automatic teardown in the vite.config.
  // This needs to happen after vitest-preview.
  cleanup();
});

[nknapp]

Another way is to call debug from the getElementError hook in the testing-library.

But if you want, you can open a PR at https://dom-preview.knappi.org/ which I developed as an alternative to vitest-preview. The setup is a little more complex though.