使用React Testing Library时Jest Mock getDomElement失效求助

看起来你遇到了Jest Mock默认导出函数失效的问题，导致实际的getDomElement被调用，而测试环境中document.getElementById('project-list')找不到对应元素，所以抛出了Cannot read property 'clientWidth' of null的错误。下面是具体的解决步骤：

1. 修正Jest Mock的写法（针对默认导出的函数） #

你当前的jest.mock调用只是返回了一个空对象，没有正确模拟默认导出的函数。对于默认导出的函数，需要明确返回包含default属性的对象，或者直接返回一个mock函数：

方式一：直接在mock中定义固定返回值 #

// 注意：把jest.mock放在describe外面，确保在组件导入前执行
jest.mock('../../../../commonHelpers/getDomElement.js', () => ({
  default: jest.fn(() => ({ clientWidth: 100 })) // 模拟返回带有clientWidth属性的元素对象
}));

describe('Table', () => {
  it('renders columns', () => {
    render(
      <ThemeProvider>
        <Table columns={columns} data={data} />
      </ThemeProvider>,
    );
  });
});

方式二：先mock模块，再灵活设置模拟实现 #

这种方式更适合多测试用例场景，方便在不同用例中设置不同的返回值：

import getDomElement from '../../../../commonHelpers/getDomElement.js';
import Table from './Table'; // 确保mock语句在组件导入前执行

// 自动将默认导出mock为jest.fn()
jest.mock('../../../../commonHelpers/getDomElement.js');

describe('Table', () => {
  beforeEach(() => {
    // 重置mock状态，避免测试用例之间互相影响
    getDomElement.mockReset();
    // 设置默认模拟返回值
    getDomElement.mockReturnValue({ clientWidth: 100 });
  });

  it('renders columns correctly', () => {
    render(
      <ThemeProvider>
        <Table columns={columns} data={data} />
      </ThemeProvider>,
    );
  });

  // 示例：在另一个用例中修改mock返回值
  it('handles narrow container width', () => {
    getDomElement.mockReturnValue({ clientWidth: 300 });
    render(
      <ThemeProvider>
        <Table columns={columns} data={data} />
      </ThemeProvider>,
    );
    // 这里可以添加对应场景的断言
  });
});

2. 确保Mock的执行时机正确 #

Jest的jest.mock会被自动提升到模块代码的最顶部执行，所以一定要把jest.mock语句放在组件import语句之前，或者至少放在describe代码块外面。如果先导入了Table组件再执行mock，原模块已经被加载，mock就不会生效了。

3. 验证Mock是否生效 #

你可以在测试用例中添加断言，确认getDomElement被正确调用：

it('calls getDomElement with expected id', () => {
  render(
    <ThemeProvider>
      <Table columns={columns} data={data} />
    </ThemeProvider>,
  );
  expect(getDomElement).toHaveBeenCalledWith('project-list');
});

核心问题是你没有正确模拟默认导出的函数，同时要注意mock的执行时机。按照上面的方式调整后，getDomElement就会返回你模拟的带有clientWidth属性的对象，不会再出现null的错误了。

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