开玩笑测试使用 NavigationEvents 的 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 文件中：

jest.mock('react-navigation', () => ({
  NavigationEvents: 'mockNavigationEvents',
}));