Since v0.34.2 "Download the React DevTools" message displayed in every test

[anthonyblond]

Describe the bug

Note sure if this is a bug exactly, but it does not seem intention. Happy to move this to a discussion instead though.

After upgrading to v0.34.2 (from v0.34.1), every test file is generating is causing the following output:

stdout | unknown test
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

This seems to be to related to this issue with React 18: facebook/react#24283 However for me its fine in browser, only an issue in the tests.

I found that it is specific to the happy-dom environment. Changing to jsdom prevents it from being displayed. I suspect it is something to do with passing environment options to happy-dom, a change mentioned in the release notes for 0.34.2.

Reproduction

React 18
vitest@0.34.2
vite@4.4.9
happy-dom@11.0.2 (downgrading this made no difference for me)
@testing-library/dom@9.3.1
@testing-library/jest-dom@6.0.0
@testing-library/react@14.0.0
@vitejs/plugin-react@4.0.4

Running any test of a react component trigger it.

Its not for every test, just for every time. Hence the "stdout | unknown test" part I assume.

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz
    Memory: 16.30 GB / 31.26 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.6.12 - ~/.local/share/pnpm/pnpm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chrome: 116.0.5845.140
  npmPackages:
    @vitejs/plugin-basic-ssl: ^1.0.1 => 1.0.1 
    @vitejs/plugin-react: ^4.0.3 => 4.0.4 
    @vitest/coverage-v8: ^0.33.0 => 0.33.0 
    vite: ^4.4.5 => 4.4.9 
    vitest: 0.34.2 => 0.34.2

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[anthonyblond]

Looking into this in more detail:

https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOM.js#L208 shows the code in React that generates the message. There are 2 relevant checks: the navigator.userAgent and window.location.protocol.

Using jsdom never triggers this, because it will cause the userAgent to be something like "Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/22.1.0" - this does not contain "Chrome" or "Firefox" so is ignored.

When using happy-dom, the userAgent is like "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0" - it has Firefox in it so will trigger it. (capricorn86/happy-dom#482)

However, in vitest 0.34.1, window.location.protocol seems to be "about:", so gets treated as "exotic" and ignored.

In vitest 0.34.2 this is now "http:" (which seems like a reasonable change), so its no longer ignored. Not sure what actually caused that change though.

So not sure if this is really a vitest issue, its either a happy-dom issue or a react issue.

[sheremet-va]

From your investigations, it looks like this is not an issue. React does what it was told to do.

If you want to silence a console, you can return false in test.onConsoleLog method if a log contains this message.

[jpveooys]

I fixed this by creating a new setup file containing:

Object.defineProperty(globalThis, '__REACT_DEVTOOLS_GLOBAL_HOOK__', { value: { isDisabled: true } })

That file was added as the first entry in setupFiles. This reason for making it a separate file is that my main setup file imports cleanup from '@testing-library/react', which triggers the console message, and so the property needs to be defined before that import happens.

(__REACT_DEVTOOLS_GLOBAL_HOOK__.isDisabled was added here: facebook/react#11448)

[anthonyblond]

Brilliant, thank you.

[capricorn86]

There is an issue for this in Happy DOM now:
capricorn86/happy-dom#1067

[capricorn86]

This has now been fixed in Happy DOM v12.