Question

我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;

Answer 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"
    ]
  }

我有一个文件夹名称＆＃34; __ test __＆＃34;在它下面是一个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');

Answer 2

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

Answer 3

我遇到了这个问题。但我能够通过查看源代码并发现它正在调用

来修复它

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
  }
})

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

3 个答案: