使用NavigationEvents trow错误的Jest测试React-native组件

Question

我遇到麻烦，请测试使用{NavigationEvents} from 'react-navigation'的组件，这是我使用它的组件的一部分：

render() {
    const spinner = this.state.isLoading ? (
      <ActivityIndicator size="large" />
    ) : null;
    return (
      <ScrollView 
        style={styles.container} 
        keyboardDismissMode="on-drag"
        testID='SettingContainer'>
        <NavigationEvents
          onWillBlur={payload =>
            locationGetter.checkLocationData(
              payload,
              'Settings',
              this.props.t,
              this.props.location,
              'getPrayerPage',
            )
          }
        />

现在当我运行此基本测试时：

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import {I18nextProvider} from 'react-i18next';
import i18n from 'config/i18nForTest';
import {Settings} from 'containers/Settings'; // to get redux connected component import Setting without {}
// import configureStore from 'redux-mock-store';
// import { Provider } from 'react-redux';

// const mockStore = configureStore([]);
// const store = mockStore({ contacts: [ ] });
it('Does Settings renders correctly?', () => {
  const tree = renderer
    .create(
      <Settings t={key => key}  />,
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

我收到此错误：

  ● Does Settings renders correctly?

    Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context.

      at invariant (node_modules/@react-navigation/core/lib/commonjs/utils/invariant.js:41:20)
      at node_modules/@react-navigation/core/lib/commonjs/views/withNavigation.js:22:15
      at updateContextConsumer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7275:19)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7441:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10138:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10170:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10256:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11121:7)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11033:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11007:3)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <Context.Consumer> component:
        in withNavigation(NavigationEvents) (at Settings.js:116)
        in View (created by View)
        in View (at ScrollViewMock.js:29)
        in RCTScrollView (created by _class)
        in _class (at ScrollViewMock.js:27)
        in ScrollViewMock (at Settings.js:112)
        in Settings (at setting.test.js:20)

package.json中的Jest配置：

"jest": {
   "verbose":true,
   "setupFiles": ["<rootDir>/jest.setup.js"],
   "preset": "react-native",
   "testMatch": [
     "<rootDir>/tests/**/*.test.js?(x)",
     "<rootDir>/src/**/*.test.js"
   ],
   "transformIgnorePatterns": ["node_modules/(?!(jest-)?react-native|react-navigation|@react-native-community|@react-navigation/.*)" 
   ],
   "transform": {
     "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
   }
 }

似乎NavigationEvents被包裹在withNavigation中，但我不知道该如何模拟这种行为。我也无法在react-navigation文档中找到如何实现一些测试逻辑的方法，我是否必须模拟库？任何帮助将不胜感激。

谢谢！

Answer 1

我为这个问题找到的解决方案是将此模拟添加到jest.config.js文件：