无法让 Jest 与 react-navigation 一起工作答案

【问题标题】：Can't get Jest to work together with react-navigation无法让 Jest 与 react-navigation 一起工作
【发布时间】：2017-05-22 06:54:14
【问题描述】：

我无法让 Jest 与 react-navigation 一起工作。我按照react-navigation guidelines 中的说明创建了一个新项目，然后添加了 Jest 并按照下面的详细说明进行了配置。该应用程序运行良好，但是当我运行测试时遇到以下错误：

React caught an error thrown by NavigationContainer. You should fix this error in your code. Consider adding an error boundary to your tree to customize error handling behavior.

  TypeError: Cannot read property 'then' of undefined

  The error is located at: 
      in NavigationContainer (created by App)
      in App

  The error was thrown at: 
      at NavigationContainer.componentDidMount (/Users/gustav/kicksort/albert/albertReact1/node_modules/react-navigation/src/createNavigationContainer.js:189:2171)
      at commitLifeCycles (/Users/gustav/kicksort/albert/albertReact1/node_modules/react-test-renderer/lib/ReactFiberCommitWork.js:421:24),
      ...
      ...

以下是我的 package.json 文件的相关内容：

"dependencies": {
  "react": "16.0.0-alpha.6",
  "react-dom": "16.0.0-alpha.6",
  "react-native": "0.44.0",
  "react-navigation": "1.0.0-beta.9"
},
"devDependencies": {
  "babel-jest": "20.0.3",
  "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
  "babel-preset-react-native": "^1.9.2",
  "enzyme": "2.8.2",
  "jest": "20.0.3",
  "jest-cli": "20.0.3",
  "jest-react-native": "18.0.0",
  "react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
  "preset": "react-native",
  "transformIgnorePatterns": [
    "node_modules/(?!(jest-)?react-native|react-navigation)"
  ]
}

这是我的 .babelrc 文件：

{
  "presets": ["react-native"],
  "env": {
      "test": {
        "presets": ["react-native"],
        "plugins": ["transform-es2015-modules-commonjs"]
      }
   }
}

最后是 __mocks__/react-native.js：

const rn = require('react-native')
jest.mock('Linking', () => {
  return {
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    openURL: jest.fn(),
    canOpenURL: jest.fn(),
    getInitialURL: jest.fn(),
  }
})
module.exports = rn;

【问题讨论】：

标签： react-native jestjs react-navigation babel-jest

【解决方案1】：

这是我在 package.json 中写的：

"jest": {
    "preset": "react-native",
    "collectCoverage": true,
    "coverageDirectory": "__coverage__",
    "testRegex": "./__tests__/[^setup].*.js$",
    "transformIgnorePatterns": ["node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"],
    "setupFiles": [
      "./__tests__/setup.js"
    ]
  }

我有一个名为“__test__”的文件夹，它下面是一个 setup.js 文件，用于控制我模拟的所有组件：

//setup.js
jest.mock('Linking', () => {
    return {
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        openURL: jest.fn(),
        canOpenURL: jest.fn(),
        getInitialURL: jest.fn(),
    }
})

jest.mock('react-native-fabric', () => {
    return {
        Crashlytics: {
            crash: () => {},
        },
        Answers: {
            logCustom: () => {},
            logContentView: () => {},
        },
    }
})

jest.mock('WebView', () => 'WebView');

jest.mock('DatePickerIOS', () => 'DatePickerIOS');

【讨论】：

谢谢你，但仍然是同样的错误。我可以看看你的整个 package.json 文件吗？
我的“依赖项”中也有“react-navigation”：“1.0.0-beta.9”。
我也有（更新了我的问题以现在显示它），您可能有与我不同版本的任何其他依赖项？

【解决方案2】：

我遇到了问题。但是我能够通过查看源代码来修复它，发现它正在调用

Linking.getInitialURL().then(
  (url: string) => url && this._handleOpenURL(url)
);

所以可以修复

jest.mock('Linking', () => {

  // we need to mock both Linking.getInitialURL() 
  // and Linking.getInitialURL().then()
  const getInitialURL = jest.fn()
  getInitialURL.mockReturnValueOnce({then: jest.fn()})

  return {
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    openURL: jest.fn(),
    canOpenURL: jest.fn(),
    getInitialURL: getInitialURL
  }
})

【讨论】：

【解决方案3】：

最简单的解决方法是使用react-native-jest-mocks。只需按照它的说明操作即可。

【讨论】：