Feature: Debug with Watch

[benguenter]

Feature: Debug with Watch

[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
#21 (comment)

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.