开玩笑地测试使用NavigationEvents的React-native组件抛出错误 [英] Jest testing React-native component which uses NavigationEvents trows error

问题描述

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

I'm having some troubles Jest testing a component which uses {NavigationEvents} from 'react-navigation' this is the part of the component where i use it:

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',
            )
          }
        />

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

Now when i run this basic test :

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 config in package.json:

"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文档中找到如何实现一些测试逻辑，我是否必须模拟库? 任何帮助将不胜感激.

It seems like NavigationEvents is wrapped in withNavigation but i don't know how to mock this behavior. Also i cant find in react-navigation docs how to implement some testing logic, do i have to mock the library or not? Any help would be greatly appreciated.

谢谢！

推荐答案

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

The solution i found for this problem, is adding this mock to jest.config.js file:

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

这篇关于开玩笑地测试使用NavigationEvents的React-native组件抛出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！