fix: use happy-dom/jsdom types for envionmentOptions

[hi-ogawa]

Description

• Related environmentOptions typing for happy-dom are outdated #7792

Using the same idea as vitejs/vite#18460.

It looks like happy-dom's dts includes invalid types (though largely completion should work), so it's breaking test/dts-config which tests with skipLibCheck: false.

node_modules/.pnpm/happy-dom@17.4.4/node_modules/happy-dom/lib/nodes/node/ICachedQuerySelectorResult.d.ts:4:21 - error TS2344: Type 'Element | null' does not satisfy the constraint 'WeakKey'.
  Type 'null' is not assignable to type 'WeakKey'.

4     result: WeakRef<Element | null> | null;
                      ~~~~~~~~~~~~~~

For now, I add a hack in test/dts-xxx to not pick up this error.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	d687e8c
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/67ef38123604750008cb8bf8
😎 Deploy Preview	https://deploy-preview-7795--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

@vitest/browser

npm i https://pkg.pr.new/@vitest/browser@7795

@vitest/coverage-istanbul

npm i https://pkg.pr.new/@vitest/coverage-istanbul@7795

@vitest/coverage-v8

npm i https://pkg.pr.new/@vitest/coverage-v8@7795

@vitest/expect

npm i https://pkg.pr.new/@vitest/expect@7795

@vitest/mocker

npm i https://pkg.pr.new/@vitest/mocker@7795

@vitest/pretty-format

npm i https://pkg.pr.new/@vitest/pretty-format@7795

@vitest/runner

npm i https://pkg.pr.new/@vitest/runner@7795

@vitest/snapshot

npm i https://pkg.pr.new/@vitest/snapshot@7795

@vitest/ui

npm i https://pkg.pr.new/@vitest/ui@7795

@vitest/spy

npm i https://pkg.pr.new/@vitest/spy@7795

@vitest/utils

npm i https://pkg.pr.new/@vitest/utils@7795

vite-node

npm i https://pkg.pr.new/vite-node@7795

vitest

npm i https://pkg.pr.new/vitest@7795

@vitest/web-worker

npm i https://pkg.pr.new/@vitest/web-worker@7795

@vitest/ws-client

npm i https://pkg.pr.new/@vitest/ws-client@7795

commit: 98f4d1a

[skovhus]

This introduced a regression for us. Now vitest pulls in typescript/lib/lib.dom.d.ts automatically, which can clash when using third party types like @cloudflare/workers-types (which shouldn't be combined with TypeScript's lib.dom).

We can't really upgrade to the latest version of vitest due to this. Not sure if there is any workaround?

[hi-ogawa]

This introduced a regression for us. Now vitest pulls in typescript/lib/lib.dom.d.ts automatically, which can clash when using third party types like @cloudflare/workers-types (which shouldn't be combined with TypeScript's lib.dom).

Can you provide a reproduction (what's different before and after this chanege)? I'm not entirely sure how this happens exactly and whether this is a bad behavior. If you use jsdom or happy-dom and you also import vitest somewehre, then such behavior seems somewhat expected (or maybe it's jsdom or happy-dom issues) 🤔

Not sure if there is any workaround?

I think you can use tsconfig paths to avoid loading the real one. Actually this is the trick I used for tests in this PR since the official happy-dom typing was partially broken.

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "happy-dom": ["./happy-dom-patch.ts"],
      "jsdom": ["./jsdom-patch.ts"],
    }
  }
}

// happy-dom-patch.ts
export {}

// jsdom-patch.ts
export {}

[skovhus]

I'm not using jsdom or happy dom, it's a cloudflare worker package inside a mono repo. For some reason I see DOM packages being pulled in. tsc --listFiles | grep dom before 3.1.2 doesn't show anything, but with 3.1.2 happy dom and typescript/lib/lib.dom.d.ts shows up.

Not sure if it's related to our mono repo setup.

[hi-ogawa]

@skovhus I think the workaround I mentioned above should be fine if you are not using happy-dom at all. If you want us to dig in, please feel free to raise an issue. I cannot tell yet if this is something Vitest should take it into account or a typing issue of happy-dom