导入外部组件库react-dual-listbox后触发Invariant Violation测试失败

我之前替换自研组件为react-dual-listbox时也踩过这个坑！这个错误本质是React识别到的组件类型不对——要么是导入方式错了，要么是测试环境没正确处理依赖，咱们一步步排查：

1. 先核对导入语句是否正确 #

react-dual-listbox用的是默认导出，很多人会误写成命名导出，这是最常见的原因：

• ❌ 错误写法（命名导出）：

import { DualListBox } from 'react-dual-listbox';

• ✅ 正确写法（默认导出）：

import DualListBox from 'react-dual-listbox';

如果不确定，直接去看库的package.json里的main字段对应的导出文件，或者官方文档确认导出方式。

2. 检查测试环境的ES模块处理 #

如果你的测试用Jest，react-dual-listbox可能发布的是ES模块格式，而Jest默认优先处理CommonJS，导致编译后组件引用失效。可以在jest.config.js里调整配置：

module.exports = {
  // 确保转译TS/JSX文件
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  // 指定用CommonJS版本的库
  moduleNameMapper: {
    '^react-dual-listbox$': '<rootDir>/node_modules/react-dual-listbox/dist/react-dual-listbox.cjs.js',
  },
};

另外，如果你的Babel配置排除了node_modules，记得把react-dual-listbox加入例外，让Babel转译它。

3. 排查组件渲染的使用错误 #

有时候是代码里的小疏忽导致的：

• 别把组件当成函数调用：比如写{DualListBox()}而不是<DualListBox />
• 检查传递的props：如果某个props要求传入组件类型，别传字符串或者其他无效值

4. 清理旧的测试Mock #

如果之前测试自研组件时用了Jest mock，比如jest.mock('./MyCustomDualList')，一定要删掉这个mock！不然测试时还是会加载旧的mock组件，和新的react-dual-listbox冲突。如果需要mock新组件，再重新配置：

jest.mock('react-dual-listbox', () => ({
  __esModule: true,
  default: () => <div data-testid="mock-dual-listbox" />,
}));

5. 确认TypeScript配置 #

确保你的tsconfig.json里的这些配置正确，避免类型编译导致的组件引用异常：

{
  "moduleResolution": "node",
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true
}

按这个顺序排查，基本能解决这个报错！

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