1

当前行为

  • 使用@react-navigation/material-top-tabs 后，我的快照失败，出现以下错误
TypeError: Cannot read property 'name' of undefined

    at Object.onIndexChange (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/@react-navigation/material-top-tabs/lib/commonjs/views/MaterialTopTabView.tsx:51:9)
    at Object.onIndexChange (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-native-tab-view/lib/commonjs/TabView.tsx:84:18)
    at b (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-native-tab-view/lib/commonjs/Pager.tsx:565:22)
    at call (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-native-reanimated/mock.js:112:21)
    at new Pager (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-native-tab-view/lib/commonjs/Pager.tsx:560:7)
    at constructClassInstance (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3932:18)
    at updateClassComponent (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7639:5)
    at beginWork$1 (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9159:16)
    at performUnitOfWork (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12981:12)
    at workLoopSync (/Users/snowflake/SnowflakeProjects/iknewit-mobile/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12955:22)

预期行为

  • 快照被保存

如何重现

Messages-test.js：

/** @flow **/

import React from 'react';
import { render } from 'react-native-testing-library';
import { NavigationContainer } from '@react-navigation/native';

import { Messages } from '../Messages';
import { MockedProvider } from '../../core/utils/tests/mockedProvider';

describe('<Messages />', () => {
  const { toJSON } = render(
    <MockedProvider>
      <NavigationContainer>
        <Messages />
      </NavigationContainer>
    </MockedProvider>
  );

  it('should match <MessagesScreen /> snapshot', () => {
    expect(toJSON()).toMatchSnapshot();
  });
});

mockedProvider.js：

/** @flow **/

import type { Element } from 'react';
import React from 'react';
import { dark, mapping } from '@eva-design/eva';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { MockedProvider as ApolloProvider } from '@apollo/react-testing';
import { ApplicationProvider as UIKittenMockedApplicationProvider, IconRegistry } from '@ui-kitten/components';

import { ThemeProvider, useTheme } from '../../context/themeContext';

type MockedProviderPropsType = {
  children: React$Node
};

export function MockedProvider(props: MockedProviderPropsType): Element<any> {
  const { children } = props;
  const { theme, themeToggle } = useTheme();

  return (
    <ThemeProvider value={{ theme, themeToggle }}>
      <IconRegistry icons={EvaIconsPack} />
      <UIKittenMockedApplicationProvider mapping={mapping} theme={dark}>
        <ApolloProvider>{children}</ApolloProvider>
      </UIKittenMockedApplicationProvider>
    </ThemeProvider>
  );
}

Messages.js：

/** @flow **/

import React from 'react';
import { StyleSheet } from 'react-native';
import { Layout } from '@ui-kitten/components';

import { TabNavigator } from '../core/navigations/topTabNavigator';

export function Messages(): React$Element<any> {
  return (
    <Layout level='3' style={style.container}>
      <TabNavigator />
    </Layout>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1
  }
});

topTabNavigator.js：

/** @flow **/

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Icon, Tab, TabBar } from '@ui-kitten/components';

import { MessagesList } from '../../components/MessagesList';

const TopTabBar = ({ navigation, state }) => {
  const onSelect = (index) => {
    navigation.navigate(state.routeNames[index]);
  };
  const tabIcon = (style, icon): React$Element<any> => <Icon {...style} name={icon} />;

  return (
    <TabBar selectedIndex={state.index} onSelect={onSelect}>
      <Tab title='Received' icon={(style) => tabIcon(style, 'inbox')} />
      <Tab title='Sent' icon={(style) => tabIcon(style, 'inbox-outline')} />
    </TabBar>
  );
};

export const TabNavigator = (): React$Element<any> => {
  const TopTab = createMaterialTopTabNavigator();
  const style = StyleSheet.create({ container: { flex: 1 } });

  return (
    <SafeAreaView style={style.container}>
      <TopTab.Navigator tabBar={(props) => <TopTabBar {...props} />}>
        <TopTab.Screen name='Received' component={MessagesList} />
        <TopTab.Screen name='Sent' component={MessagesList} />
      </TopTab.Navigator>
    </SafeAreaView>
  );
};

jestSetupFile.js：

/**
 * Jest configuration
 * @flow
 **/

jest.mock('@react-native-community/async-storage');

jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

你的环境

| 软件 | 版本 |

| ---------------------------------- | -------- |

| @react-navigation/本机 | 5.0.5 |

| @react-navigation/material-top-tabs | 5.0.7 |

| 反应原生选项卡视图 | 2.13.0 |

| 反应原生 | 0.61.5 |

| 节点 | 12.16.0 |

| 纱线 | 1.22.0 |

4

0 回答 0