adding debug printings makes my test pass - any reason why?

[maksnester]

jest.bug.720.mov

can anyone explain to me why adding screen.debug or logTestingPlaygroundURL to the test code makes the test pass?

I was refactoring a test, trying to speed it up a bit by replacing the unnecessary find* selector with the query selector (when I check that something is not on the page) but it made one of my tests fail and I tried to debug it and I can't because adding debug printings makes the test pass ¯\(ツ)/¯

I'm not even adding a new import of the screen - it is already there.

Any thoughts?

    "@testing-library/dom": "10.4.0",
    "@testing-library/jest-dom": "6.6.3",
    "@testing-library/react": "16.2.0",
    "@testing-library/user-event": "14.6.1",
    "es-jest": "2.1.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "jest-fixed-jsdom": "0.0.9",

[imevanc]

@maksnester

When switching from find* selectors (which are asynchronous and wait for elements) to query* selectors (which are synchronous and return immediately), you remove an implicit wait in your test. This can lead to race conditions where assertions run before the component has finished updating.

Additionally, adding screen.debug() introduces a slight delay in execution because these functions need to access and process the DOM to generate output. This delay unintentionally allows React to complete its rendering cycle, making tests that previously failed suddenly pass.

I'd use waitFor to ensure assertions run only after the expected changes have occurred:
await waitFor(() => { expect(screen.queryByText('something')).not.toBeInTheDocument(); });