使用Jest测试Tabulator项目遇构造函数错误及渲染问题求助

问题根源 #

Tabulator的ES模块导出在浏览器环境和Node.js/Jest环境存在差异：TabulatorFull是Webpack等浏览器打包工具使用的完整导出，但Jest运行在Node环境下，默认解析的是针对Node的轻量版本，导致导入报错；改用默认导入后，虽然能实例化，但Node环境缺少完整DOM支持，导致表格数据加载后无法渲染。

解决方案 #

方案1：强制Jest加载Tabulator浏览器版本

在jest.config.js中添加模块映射，让Jest使用和浏览器一致的Tabulator打包文件：

module.exports = {
  moduleNameMapper: {
    'tabulator-tables$': 'tabulator-tables/dist/js/tabulator.min.js',
  },
};

保持原导入方式即可：

import { TabulatorFull as Tabulator } from "tabulator-tables";

此方式能让Jest环境和浏览器环境使用完全相同的Tabulator版本，解决导入报错和渲染问题。

方案2：配置Jest使用JSOM模拟浏览器环境

Jest 27默认使用Node环境，需切换到jsdom模拟浏览器DOM：

1. 修改jest.config.js：

module.exports = {
  testEnvironment: 'jsdom',
};

2. 在测试文件中确保DOM元素存在，验证渲染结果：

import Tabulator from "tabulator-tables";

test('表格数据加载并渲染', async () => {
  // 创建测试用DOM元素
  const tableContainer = document.createElement('div');
  document.body.appendChild(tableContainer);

  const table = new Tabulator(tableContainer, {
    data: [{ id: 1, name: '测试数据' }],
    columns: [{ field: 'id' }, { field: 'name' }],
  });

  await new Promise(resolve => table.on('dataLoaded', resolve));
  
  // 验证渲染的行数
  const rows = tableContainer.querySelectorAll('.tabulator-row');
  expect(rows.length).toBe(1);
});

方案3：单元测试场景下模拟Tabulator渲染逻辑

如果仅需验证数据加载逻辑，无需真实渲染，可以模拟Tabulator的核心方法：

jest.mock('tabulator-tables', () => {
  return jest.fn().mockImplementation(() => {
    return {
      on: jest.fn((event, cb) => {
        if (event === 'dataLoaded') setTimeout(cb, 0);
      }),
      // 按需模拟其他需要测试的方法
    };
  });
});

import Tabulator from "tabulator-tables";

test('数据加载事件触发', async () => {
  const mockDataLoaded = jest.fn();
  const table = new Tabulator('#table', {
    data: [{ id: 1 }],
    columns: [{ field: 'id' }],
  });

  table.on('dataLoaded', mockDataLoaded);
  await new Promise(process.nextTick);
  
  expect(mockDataLoaded).toHaveBeenCalled();
});

内容的提问来源于stack exchange，提问作者Numan Farukh