DataTables 3.x.x CommonJS import fails with jest/jsdom

sebastianbarth · October 22

Hi Allan,
I’m testing a component that uses DataTables with Jest and jsdom. Loading datatables.net-dt fails before creating a table.

I could reproduce this isolated with DataTables 3.1.4.

In an empty directory:

npm init -y
npm install --save-dev jest@30 jest-environment-jsdom@30 datatables.net-dt@3.1.4
Create dt.test.js:

test('loads DataTables', () => {
  const DataTable = require('datatables.net-dt');
  expect(DataTable).toBeDefined();
});

npx jest --env=jsdom --runInBand

This fails with:

TypeError: Cannot set properties of undefined (setting 'api')

The styling wrapper appears to call:

require('datatables.net')(window);

However, when a global window exists, the core already exports the DataTable constructor. Calling it this way reaches this.api with this undefined.
Could the CommonJS wrapper use the exported constructor directly when window exists, and invoke the factory only when no global window is available, .. or similar?

Resolving the ESM entry points works around the issue, but it would be helpful for the CommonJS import to work too.

Thanks for checking!

Best Regards,
Sebastian

sebastianbarth · October 23

jest.config.js - How we (hopefully only temporarily) work around this issue:

module.exports = {
  ...,
  moduleNameMapper: {
    // DataTables 3's CommonJS wrappers call the constructor as a factory when window exists (as in jsdom),
    // causing "Cannot set properties of undefined (setting 'api')". We have to use the application's ESM entry points,
    // which also provide its named exports.
    // See: https://datatables.net/forums/discussion/81980/datatables-3-x-x-commonjs-import-fails-with-jest-jsdom
    '^datatables\\.net$': 'datatables.net/js/dataTables.mjs',
    '^datatables\\.net-dt$': 'datatables.net-dt/js/dataTables.dataTables.mjs',
    '^datatables\\.net-fixedcolumns$': 'datatables.net-fixedcolumns/js/dataTables.fixedColumns.mjs',
    '^datatables\\.net-scroller$': 'datatables.net-scroller/js/dataTables.scroller.mjs',
    '^datatables\\.net-scroller-dt$': 'datatables.net-scroller-dt/js/scroller.dataTables.mjs',
  },
  ...,
}

Have an awesome weekend!

Sebastian

allan · October 23

Hi Sebastian,

Many thanks for flagging this up and the extra details. I'll look into it next week and get back to you.

Allan

allan · October 26

I've committed this change to my package builder to address this issue. It will propagate to the extensions as well, although they will each need a release in order to get that update. I'm not currently planning to do an immediate release on a number of the extensions (just those which have other patches also in the queue), but they will get updated as I roll through them.

The nightly now has the change (and the style file) for the core software if you want to try it out.

Allan

DataTables 3.x.x CommonJS import fails with jest/jsdom

DataTables 3.x.x CommonJS import fails with jest/jsdom

Answers