1

我无法让Jest与react-navigation一起工作。我按照react-navigation 指南中的说明创建了一个新项目，然后添加了 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;
4

3 回答 3

2

这是我在 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');
于 2017-05-22T13:45:06.020 回答
0

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

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
  }
})
于 2017-06-13T22:40:11.363 回答
-1

最简单的解决方法是使用react-native-jest-mocks。只需按照它的指示。

于 2018-05-28T22:28:24.483 回答