如何为idb包编写单元测试？解决子组件测试的export语法错误

问题场景 #

我在项目中使用idb操作IndexedDB，为一个仅展示信息卡片的子组件编写单元测试——该子组件不直接与IndexedDB交互，数据由操作IndexedDB的父组件通过props传递。但运行子组件单元测试时出现如下错误：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export

• from './build/index.js';

SyntaxError: Unexpected token 'export'

1 | import { deleteDB, openDB } from 'idb/with-async-ittr.js';

解决方案 #

1. 让Jest转换idb模块 #

Jest默认不会转换node_modules目录下的ES模块，而idb采用ES模块语法编写，因此需要修改Jest配置，将idb加入转换白名单：

• 若使用jest.config.js，添加如下配置：

module.exports = {
  transformIgnorePatterns: [
    'node_modules/(?!idb/)'
  ],
  // 其他已有配置...
};

• 若在package.json中配置Jest，修改为：

"jest": {
  "transformIgnorePatterns": ["node_modules/(?!idb/)"]
}

该配置表示Jest不要忽略对idb模块的转换，让Babel处理其ES语法。

2. Mock idb模块（推荐方案） #

由于子组件并不直接依赖idb，只是父组件使用该模块，因此可以在子组件的测试文件中mock掉idb，避免加载真实模块：
在测试文件顶部添加：

jest.mock('idb/with-async-ittr.js', () => ({
  deleteDB: jest.fn(),
  openDB: jest.fn()
}));

Jest会用自定义的mock函数替代真实的idb模块，彻底跳过对该模块的加载与解析，从根源上避免语法错误。

3. 检查Babel配置兼容性 #

确保项目的Babel配置支持ES模块转换，检查.babelrc或babel.config.js，确认包含@babel/preset-env并配置正确：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }]
  ]
};

该配置可将ES模块语法转换为Jest可识别的CommonJS语法。

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