Question

我正在尝试对Jest，Expo，React Navigation进行快照测试，而我的整个应用程序仅使用钩子。我想最终将它们纳入e2e测试，在其中Jest单击并快照测试所有内容，但我什至无法获得反应导航进行渲染。我在expo loader之后的快照始终显示为“ null”。我遵循了expo init随附的标签启动器中的基本示例，但是它概述了如何设置模拟程序的方式根本不适用于我的应用程序。我已经尝试过各种方法，但是没有用。

App.tsx

import { Ionicons } from '@expo/vector-icons';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import React, { useState } from 'react';
import { YellowBox } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { useScreens } from 'react-native-screens';
import { Provider as RxProvider } from 'reactive-react-redux';
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import SnackBar from './components/UI/Snackbar';
import { socketMiddleware } from './lib/socketMiddleware';
import SwitchNavigator from './navigation/AppNavigator';
import rootReducer from './reducers/rootReducer';
import { theme } from './Theme';

const middleware = [thunk, socketMiddleware()];
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore<iAppState, any, any, any>(
  rootReducer,
  composeEnhancers(applyMiddleware(...middleware))
);

// Must be called prior to navigation stack rendering
useScreens();

YellowBox.ignoreWarnings(['Require cycle:']);

const App = (props) => {
  const [isLoadingComplete, setLoadingComplete] = useState(false);

  if (!isLoadingComplete && !props.skipLoadingScreen) {
    return (
      <AppLoading
        startAsync={loadResourcesAsync}
        onError={handleLoadingError}
        onFinish={() => handleFinishLoading(setLoadingComplete)}
      />
    );
  } else {
    return (
      <RxProvider store={store}>
        <PaperProvider theme={theme}>
          <SwitchNavigator />
          <SnackBar />
        </PaperProvider>
      </RxProvider>
    );
  }
};

const loadResourcesAsync = async () => {
  await Promise.all([
    Asset.loadAsync([
      //nothing
    ]),
    Font.loadAsync({
      ...Ionicons.font,
      TitilliumText250: require('./assets/fonts/TitilliumText22L-250wt.otf'),
      TitilliumText800: require('./assets/fonts/TitilliumText22L-800wt.otf')
    })
  ]);
};

const handleLoadingError = (error: Error) => {
  console.warn(error);
};

const handleFinishLoading = (setLoadingComplete) => {
  setLoadingComplete(true);
};

export default App;

App.test.tsx：

import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import NavigationTestUtils from 'react-navigation/NavigationTestUtils';
import renderer from 'react-test-renderer';
import App from './App';
import { theme } from './Theme';

jest.mock('expo', () => ({
  AppLoading: 'AppLoading'
}));
jest.mock('react-native-screens');
jest.mock('react-native-paper');
jest.mock('redux');
jest.mock('reactive-react-redux');
jest.mock('./navigation/AppNavigator', () => 'SwitchNavigator');

describe('App', () => {
  jest.useFakeTimers();

  beforeEach(() => {
    NavigationTestUtils.resetInternalState();
  });

  // success
  it(`renders the loading screen`, () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  // this snapshot is always null
  it(`renders the root without loading screen`, () => {
    const tree = renderer
      .create(
        <PaperProvider theme={theme}>
          <App skipLoadingScreen></App>
        </PaperProvider>
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

/navigation/AppNavigator.tsx：

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import LoginStack from './LoginStack';
import TabStack from './TabStack';

/** The most root navigator which allocates to the others. */
const SwitchNavigator = createAppContainer(
  createSwitchNavigator(
    {
      LoginStack: LoginStack,
      TabStack: TabStack
    },
    {
      initialRouteName: 'LoginStack'
    }
  )
);

export default SwitchNavigator;

Answer 1

我遇到了类似的问题，并通过https://github.com/expo/expo/issues/7155#issuecomment-592681861

找到了解决方法

好像act（）神奇地为我工作，阻止它返回null（不确定如何）

更新您的测试以使用它：

import { act, create } from 'react-test-renderer';

it('renders the root without loading screen', () => {
    let tree;

    act(() => {
      tree = create(
        <PaperProvider theme={theme}>
          <App skipLoadingScreen></App>
        </PaperProvider>
      );
    });

    expect(tree.toJSON()).toMatchSnapshot();
  });

注意：当我更改了从'react-test-renderer'导入的方式时，我的测试无法找到act（）作为函数，因此只需重新安装npm软件包即可解决此问题！

无法使Jest expo应用程序与反应导航一起使用

1 个答案: