I am attempting to import a CommonJS module (KeyboardJS) into some tests I have written in an ES module.
Here is my test code to give you an idea:
import { JSDOM } from 'jsdom'
import assert from 'assert'
import keyboardjs from 'keyboardjs' // <-- this line throws an error
// create mocked window object
const window = new JSDOM().window
const document = window.document
// pass this to keyboardjs?
keyboardjs.watch(document)
And here is the error:
Error: Cannot find window functions addEventListener or attachEvent.
at Keyboard.watch (./node_modules/keyboardjs/dist/keyboard.js:614:19)
at Keyboard.setContext (./node_modules/keyboardjs/dist/keyboard.js:587:14)
at new Keyboard (./node_modules/keyboardjs/dist/keyboard.js:439:12)
at ./node_modules/keyboardjs/dist/keyboard.js:1076:18
at ./node_modules/keyboardjs/dist/keyboard.js:2:83
at Object.<anonymous> (./node_modules/keyboardjs/dist/keyboard.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
at async Loader.import (internal/modules/esm/loader.js:166:24)
at async formattedImport (./node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
at async Object.exports.requireOrImport (./node_modules/mocha/lib/nodejs/esm-utils.js:48:32)
at async Object.exports.loadFilesAsync (./node_modules/mocha/lib/nodejs/esm-utils.js:88:20)
at async singleRun (./node_modules/mocha/lib/cli/run-helpers.js:125:3)
at async Object.exports.handler (./node_modules/mocha/lib/cli/run.js:374:5)
It appears that keyboardjs is attempting to access the window object while it is loaded, which of course can't work since I am loading it in some test code.
Is there some special way to import it without triggering this behavior?
I was able to get this to work using dynamic imports.
You can use an import function, which returns a Promise for when the module is imported.
JSDOM can be imported first, and then used to create an embedded window object which we then add to the global scope.
Then, we can import keyboardjs using the same mechanism.
Here is roughly the code I ended up with:
// import JSDOM first
import('jsdom').then(async module => {
const window = new module.JSDOM().window
// now set the global window object to the JSDOM window
globalThis.window = window
// _now_ import keyboardjs
const keyboardjs = await import('keyboardjs')
const document = window.document
return { keyboardjs, document }
}).then(({ keyboardjs, document }) => {
// test code goes here, and can use keyboardjs and document
})