使用 Jest 进行测试时，无法读取未定义的 react-native-vector-icons 的属性“默认”答案

【问题标题】：Cannot read property 'default' of undefined react-native-vector-icons when testing with Jest使用 Jest 进行测试时，无法读取未定义的 react-native-vector-icons 的属性“默认”
【发布时间】：2019-07-17 13:30:11
【问题描述】：

我在使用Jest 进行单元测试时遇到了react-native-vector-icons 包的问题。

错误：

 TypeError: Cannot read property 'default' of undefined

      14 |   test("second step register render correctly", () => {
      15 |     // @ts-ignore
    > 16 |     const wrapper = mount<SecondStepRegisterScreenImpl>(<SecondStepRegisterScreenImpl navigation={{}}/>)
         |                     ^
      17 |     wrapper.render()
      18 | 
      19 |     expect(wrapper.find(SafeAreaView)).toExist()

      at new Icon (node_modules/react-native-vector-icons/lib/create-icon-set.js:42:399)
      at constructClassInstance (node_modules/react-dom/cjs/react-dom.development.js:11361:18)
      at updateClassComponent (node_modules/react-dom/cjs/react-dom.development.js:14687:5)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15644:16)

首先，我将 react-native 与 ignite-bowser 模板一起使用，该模板将 typescript 用于 react-native。 参考：infinitered/ignite-bowser

下面是我的Jest 配置：jest-preset-ignite 预设：infinitered/jest-preset-ignite

module.exports = {
  preset: "jest-preset-ignite",
  transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!(jest-)?react-native|react-native|react-navigation|@react-navigation|@storybook|@react-native-community|@expo)"
  ],
  setupFilesAfterEnv: [
    "<rootDir>/test/setup-enzyme.ts"
  ],
  moduleNameMapper: {
    "^lodash-es$": "lodash"
  }
};

我曾尝试像这样模拟 react-native-vector-icons 包：

jest.mock("react-native-vector-icons")

但没有结果。

我错过了什么吗？

【问题讨论】：

标签： javascript react-native jestjs

【解决方案1】：

我通过修改 jest 预处理器 想通了。

来自 react-native 问题：

创建一个包含 jest 预处理器代码的文件（例如：jest-preprocessor.js）：

/**
 * Your own [temporary?] transform for React Native
 */
const generate = require('@babel/generator').default
const transformer = require('metro-react-native-babel-transformer')
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction')
const metroBabelRegister = require('metro-babel-register')

metroBabelRegister([])

module.exports = {
  process(src, file) {
    const { ast } = transformer.transform({
      filename: file,
      options: {
        ast: true,
        dev: true,
        enableBabelRuntime: false,
        experimentalImportSupport: false,
        hot: false,
        inlineRequires: false,
        minify: false,
        platform: '',
        projectRoot: '',
        retainLines: true,
        sourceType: 'unambiguous',
      },
      src,
      plugins: metroBabelRegister.config.plugins,
    })

    return generate(
      ast,
      {
        code: true,
        comments: false,
        compact: false,
        filename: file,
        retainLines: true,
        sourceFileName: file,
        sourceMaps: true,
      },
      src,
    ).code
  },

  getCacheKey: createCacheKeyFunction([
    __filename,
    require.resolve('metro-react-native-babel-transformer'),
    require.resolve('@babel/core/package.json'),
  ]),
}

添加到您的 Jest 配置中：

transform: {
  '^.+\\.js$': '<rootDir>/jest-preprocessor.js',
},

参考：react-native/issues/22175#issuecomment-477138096

【讨论】：