ReferenceError: EventTarget is not defined in node<16

[ph-fritsche]

• @testing-library/user-event version: 14.0.0-beta.3

Relevant code or config

new EventTarget()

Problem description:

EventTarget does not exist in older node versions.
Importing user-event results in a ReferenceError because:

user-event/src/utils/dataTransfer/Clipboard.ts

Line 34 in 2c5d9f1

class ClipboardStub extends EventTarget implements Clipboard {

Suggested solution:

Either

• polyfill
• user-event requires a DOM implementation which requires EventTarget so any DOM implementation should already ship with a polyfill. We might as well just ask our users to set EventTarget globally if they use a DOM implementation that does not already do so in an older node environment.

[ph-fritsche]

We won't include a polyfill for now as it is unclear if there are any users out there who use environments without EventTarget.

[make-github-pseudonymous-again]

Just ran into this today. Running Node 14.18.

[ph-fritsche]

@make-github-pseudonymous-again Which DOM implementation are you using? Did you manage to set global.EventTarget to the EventTarget implementation used by your DOM implementation?

[make-github-pseudonymous-again]

I have not setup a particular DOM implementation. This is my first try at user-event. Maybe this is my problem?

[ph-fritsche]

user-event only works on the DOM. This can be a real browser or any other DOM implementation. Most people use jsdom. This is also included in jest.
Depending on how the environment is set up, the window is merged with global (like in the browser and also in jest-jsdom) or not (like in basic node environment with e.g. jsdom). You basically would need to global.EventTarget = whateverVarIsHoldingWindow.EventTarget.

[make-github-pseudonymous-again]

OK. I may have had too much enthusiasm when the first render-only tests passed. I probably need to do what is explained here for the interactive tests to work. Thanks for taking the time to lead me on the path of solution.

[make-github-pseudonymous-again]

Mmh. I am running into another problem trying to import jsdom in my testing environment

Warning: Accessing non-existent property 'VERSION' of module exports inside circular dependency

Do you have another DOM implementation to recommend to see if it produces the same error?

PS: Mmh maybe that warning has nothing to do with the error. Either way, I cannot make 'global-jsdom' work at the moment.

[make-github-pseudonymous-again]

I managed to make it work using @testing-library/user-event v13.5.0 instead of v14.0.0-beta.x. It seems my testing environment already sets up global.window and global.document but not document or window or global.EventTarget. Attempting to polyfill only EventTarget produces more errors. Attempting to just import jsdom breaks everything (without even trying to polyfill, I've tried it all the way down to v16.5.1).

I found something that works for now...

PS: OK I figured it out. Meteor runs tests both for the server and for the client. The server environment has no window whereas the client environment does have one. I was confused because I was convinced my client test would only run on the client (it was surrounded by if (Meteor.isClient) { ... }. But the import statements are executed on both, and that's what breaks the server run. So two solutions: dynamic imports inside the client block, or client-only tests. Still deciding on which solution works best.