tests(perf): explore happy-dom (highly wip)

[belgattitude]

caution Highly WIP and I'm not sure I would do this, but it might be a good case to help the upstream https://github.com/capricorn86/happy-dom to fill gaps and bring more supported features.

Part of ci performance explorations.

• Ci improve ci time iteration 3 #16694
• Ci: improve install time iteration 2 #16638
• ci(perf): use alpine docker based images for postgresql + no fsync (wip) #16709
• Remove @vscode/sqlite3 from example and CI matrix #16693
• CI: speed up CI time by improving yarn install and caches (iteration 1 / >30%) #16581

Install

yarn install
yarn build --projects=@strapi/admin-test-utils,@strapi/helper-plugin --skip-nx-cache
cd packages/core/admin

# Works
yarn test:front --coverage false --env=@happy-dom/jest-environment

Benchmarks.

The test suite won't run with the latest version of happy-dom. I'll comment failing issues. Not sure about speed but I would say between 5-20% speedup. Not sure it's worth it due to happy-dom parity (cost/benefit). Will try to reach the author.

What works right now

yarn test:front --coverage false \
        --testPathPattern "admin/src/utils/*" \
        --env=@happy-dom/jest-environment

# compared to

yarn test:front --coverage false \
        --testPathPattern "admin/src/utils/*" \
        --env=jsdom

Not enough passing tests to measure

[belgattitude]

Happy dom upstream issue

• MatchMedia.matches support capricorn86/happy-dom#921

yarn install
yarn build --projects=@strapi/admin-test-utils,@strapi/helper-plugin --skip-nx-cache

cd packages/core/admin
yarn test:front --coverage false --testPathPattern admin/src/components --env @happy-dom/jest-environment

   TypeError: Cannot read properties of undefined (reading 'matches')

      12 |
      13 | const getDefaultTheme = () => {
    > 14 |   const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

[belgattitude]

Happy dom upstream issue

• Jsdom inconsistencies for 0px in matchInilneSnapshot capricorn86/happy-dom#922

Test failing example: https://github.com/strapi/strapi/blob/main/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js#L27

yarn install
yarn build --projects=@strapi/admin-test-utils,@strapi/helper-plugin --skip-nx-cache

cd packages/core/admin
yarn test:front --coverage false --testPathPattern admin/src/pages --env @happy-dom/jest-environment

[belgattitude]

@capricorn86 Would you be interested to collaborate on this attempt ?

I'm not working for strapi, but got a recent interest in whatever helps to reduce carbon emission 🌳 . Very naive and tiny effect I guess but I need to start somewhere, before sharing more (a future website with recipes and collection of libraries)

Strapi seemed to me a very good start, cause I'm impressed by what they're doing as well as your work on happy-dom.

If you're interested let me know

[gu-stav]

@belgattitude Thank you again so much for investing all your time into our tooling :) I will be honest with you here: unless this would bring a significant speed improvement (which I doubt), I think I'd like to stick to the default jest setup. The system is already complex (and brittle) enough and I would prefer to stick to the default jsdom setup for now.

While it is a novel goal to optimize for carbon emissions looking at the high-level setup will help to not micro-optimize steps, but improve the situation as a whole. You have already had a tremendous impact for us, which I appreciate a lot.

[belgattitude]

Makes sense