React Native中使用react-native-collapsible导致Jest快照测试报错求助

开发者阿泽

2026-7-1

修复react-native-collapsible/Accordion快照测试的模块导入错误

报错SyntaxError: Cannot use import statement outside a module的核心原因是：Jest默认不会转译node_modules目录下的ES模块代码，而react-native-collapsible采用ES模块语法编写，导致Jest无法识别其中的import语句。

具体修复步骤：

修改jest.config.js，添加transformIgnorePatterns配置
在你的配置对象中新增transformIgnorePatterns字段，指定Jest需要转译react-native-collapsible包：

const config = {
  "displayName": 'DIS',
  "bail": 1,
  "preset": "react-native",
  "verbose": true,
  "moduleFileExtensions": ["js","json","ts","tsx"],
  "testPathIgnorePatterns": ['\\.snap$','./__tests__/__mocks__/','../../node_modules/','./lib/','./example/',],
  "setupFiles": ['./jest.setup.js'],
  "snapshotSerializers": ["enzyme-to-json/serializer"],
  "testRunner": 'jest-jasmine2',
  "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"],
  "testTimeout": 360000000,
  // 新增以下配置
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native-collapsible|react-native)/)"
  ]
  // "testSequencer": './jest.sequencer.js',
  // "slowTestThreshold": 1,
  // "testResultsProcessor": "./jest.testTesultsProcessor.js"
};

这个配置的作用是：让Jest不要忽略react-native-collapsible和react-native包的转译（保留react-native是因为默认preset依赖它）。

若转译无效，尝试手动Mock组件
如果上述配置仍未解决问题，可以在测试文件中手动MockAccordion组件：
```
jest.mock('react-native-collapsible/Accordion', () => {
  const React = require('react');
  const { View } = require('react-native');
  return ({ children }) => <View>{children}</View>;
});
```
用简单的View组件替代真实的Accordion，避免加载原包的ES模块代码。
检查jest.setup.js的冲突配置
确保jest.setup.js中没有覆盖transformIgnorePatterns或相关转译规则的代码，保持配置一致。