TypeError: _tabulatorTables.Tabulator is not a constructor

Question

I am trying write tests for my javascript project that uses tabulator (^5.2.2) using jest (v27). The tabulator is being imported and used in JS file like below

import {TabulatorFull as Tabulator} from "tabulator-tables";
...
var table = new Tabulator("#example-table", config)
...

When I run the project using webpack and load in browser, everything works fine, but when I try to run tests of the same file in jest, I get this error

 FAIL  tests/integration/__tests__/tabulator.js
  ● Test suite failed to run

    TypeError: _tabulatorTables.TabulatorFull is not a constructor

      15 |
      16 |
    > 17 | var table = new Tabulator("#example-table", {
         |             ^
      18 |   data:tabledata,           //load row data from array
      19 |   layout:"fitColumns",      //fit columns to width of table
      20 |   responsiveLayout:"hide",  //hide columns that dont fit on the table

      at Object.<anonymous> (src/main.js:17:13)
      at Object.<anonymous> (tests/integration/__tests__/tabulator.js:1:1)

 Test Suites: 1 failed, 1 total
 Tests:       0 total
 Snapshots:   0 total
 Time:        0.703 s
 Ran all test suites.

And when I change this import from above to below

import Tabulator from "tabulator-tables";

I no more see the above error but then there's no data rendered in the table even though I've checked in the tabulator's dataLoaded event that data is loaded.

Would appreciate any kind of help, thanks!

Lanthanide

If you log Tabulator it is undefined. I'm running into the same issue and I haven't found out why it is undefined. Any progress on your end? – Hastings

I went for mocking tabulator for the tests as I could not find any solution. – Lanthanide

ok, thanks. I guess I'll go that route – Hastings

How did you mock it? I'm not able to figure it out – Hastings

I went to the project's discord server, and the author's message about this specific issue was this: " If you are having a lack of render events then this means that the table was never attached to the DOM, without the table being visible Tabulator cannot render it internal elements because it cannot do the necessary layout calculations because elements do not have dimensions until they are added to the DOM". So apparently this is not possible to do; also I want to know what it means to mock tabulator – Kennethkennett

Answer 1

So, from the discussion in the comments, looks like the only way to write tests for components that use tabulator is by mocking the tabulator, so, I've created this github repo tabulator-mock where I've mocked the tabulator in a very simple manner. The information in readme file is very short currently, I'll hopefully be adding more info in future.

Hope it helps!

Ineffable