Detect "HappyDOM" in userAgent string in same way as "jsdom"

[anthonyblond]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Summary

Wherever there is code like const isJSDOM = /jsdom/.test(window.navigator.userAgent);, generalise it to use the /jsdom|HappyDOM/ instead.

Detail

Currently there are several places in the code that have logic like the following (copied from packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts):

      // jsdom has no layout capabilities
      const isJSDOM = /jsdom/.test(window.navigator.userAgent);

      if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
        logger.error(
          [
            'The parent DOM element of the data grid has an empty height.',
            'Please make sure that this element has an intrinsic height.',
            'The grid displays with a height of 0px.',
            '',
            'More details: https://mui.com/r/x-data-grid-no-dimensions.',
          ].join('\n'),
        );
        errorShown.current = true;
      }

This relies on the jsdom testing environment using "Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/{packageVersion}" as its default userAgent string.

If using vitest with the default environment of happy-dom, instead, this won't work and the error is shown in tests.

release v12.0.0.0 of happy-dom has fixed an issue with its useragent string, and now uses "Mozilla/5.0 (X11; {process.platform} {process.arch}) AppleWebKit/537.36 (KHTML, like Gecko) HappyDOM/{packageVersion}" as its default. So changing the regex to /jsdom|HappyDOM/ should be sufficient.

Examples 🌈

No response

Motivation 🔦

Make development of apps using mui-x (specifically in my case x-data-grid) with vite easier without workarounds.

I was going to just submit a simple PR specifically for useGridDimensions.ts in x-data-grid, but realised the same logic is used all across the library, so there might be a different pattern that needs to be implemented.

Order ID 💳 (optional)

No response

[anthonyblond]

FYI for anyone else using vitest+happy-dom:

If you are using version > 12 of happy-dom, a workaround is to add the following to your defineConfig:

    environmentOptions: {
      happyDOM: {
        settings: {
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          navigator: {
            userAgent: 'Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/22.1.0',
          },
        },
      },
    },
    ```

(I'll be making a tiny PR for vitest later to fix the typing)

[cherniavskii]

I wonder if we can use the process.env.NODE_ENV === 'test' check instead.

But to be fair, I'm not even sure if this error is still necessary, as it seems like the grid works just fine if the parent doesn't have predefined dimensions set: https://codesandbox.io/s/amazing-nightingale-yl7c8s?file=/Demo.tsx

@mui/xgrid What do you think?

[romgrk]

That seems to be the only location in non-testing code where we check for jsdom. We should remove it.

[infantito]

I did a patch-package to the library, but setting the environmentOptions property is better.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@anthonyblond How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.