2

react-native-vector-icons我的单元测试中运行包时遇到问题Jest。

错误：

 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。参考：无限红/点燃鲍泽

波纹管我的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")

但没有结果。

我错过了什么吗？

4

1 回答 1

0

我通过修改jest preprocessor弄清楚了。

从反应原生问题：

创建一个包含 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

于 2019-07-19T15:24:25.077 回答