Error when using with @testing-library/user-event / @testing-library/dom

[benbender]

I'm trying to use happy-dom together with @testing-library/user-event or @testing-library/dom. When I try to emulate a click (via fireEvent or userEvent.click, I'm seeing the following error:

TypeError: Cannot set property currentTarget of #<MouseEvent> which has only a getter
 ❯ GlobalWindow.dispatchEvent node_modules/.pnpm/happy-dom@6.0.4/node_modules/happy-dom/lib/event/EventTarget.js:44:29
 ❯ HTMLDocument.dispatchEvent node_modules/.pnpm/happy-dom@6.0.4/node_modules/happy-dom/lib/nodes/document/Document.js:698:37
 ❯ HTMLElement.dispatchEvent node_modules/.pnpm/happy-dom@6.0.4/node_modules/happy-dom/lib/nodes/node/Node.js:354:40
 ❯ HTMLElement.dispatchEvent node_modules/.pnpm/happy-dom@6.0.4/node_modules/happy-dom/lib/nodes/node/Node.js:354:40
 ❯ HTMLElement.dispatchEvent node_modules/.pnpm/happy-dom@6.0.4/node_modules/happy-dom/lib/nodes/node/Node.js:354:40
 ❯ HTMLElement.dispatchEvent node_modules/.pnpm/happy-dom@6.0.4/node_modules/happy-dom/lib/nodes/node/Node.js:354:40
 ❯ node_modules/.pnpm/@testing-library+user-event@14.2.5_gwcpuyfvwbszhlmedmugzivgzu/node_modules/@testing-library/user-event/dist/index.mjs:1733:33
    1731|     return !defaultPrevented;
    1732|   }
    1733|   return wrapEvent(() => target.dispatchEvent(event), target);
       |                                 ^
    1734| }
    1735|
 ❯ Object.eventWrapper node_modules/.pnpm/@testing-library+dom@8.16.0/node_modules/@testing-library/dom/dist/config.js:27:23
 ❯ wrapEvent node_modules/.pnpm/@testing-library+user-event@14.2.5_gwcpuyfvwbszhlmedmugzivgzu/node_modules/@testing-library/user-event/dist/index.mjs:1707:23
 ❯ dispatchEvent node_modules/.pnpm/@testing-library+user-event@14.2.5_gwcpuyfvwbszhlmedmugzivgzu/node_modules/@testing-library/user-event/dist/index.mjs:1733:10

The reason is that event.target and event.currentTarget are readonly. I've provided a pr to fix the problem.

[capricorn86]

Thanks again for reporting @benbender! 🙂

I have created a fix that will not set Event.target and Event.currentTarget directly. However, you will probably run into more problems if you let Vitest transpile external libraries. You need to change the transform config to only transform your app source code to avoid this problem.

    transformMode: {
      web: [/src\/\.[tj]sx?$/]
    }

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v7.5.6