Jest Redux Persist:TypeError:无法在 writeStagedState 读取未定义的属性“catch”

Mos*_*sef 5 jestjs react-native redux-persist react-native-testing-library

我正在尝试使用 Jest 和 Typescript 测试我的 LoginScreen。我使用 redux 和 redux-persist 进行存储,并将存储设置为使用 AsyncStorage 作为配置的一部分。我怀疑 redux-persist 试图在它使用的内置超时功能用完并尝试将存储设置为默认存储后重新水合?我收到以下错误:

console.error
redux-persist: rehydrate for "root" called after timeout. undefined
undefined
at _rehydrate (node_modules/redux-persist/lib/persistReducer.js:70:71)
at node_modules/redux-persist/lib/persistReducer.js:102:11
at tryCallOne (node_modules/promise/setimmediate/core.js:37:12)
at Immediate._onImmediate (node_modules/promise/setimmediate/core.js:123:15)
Run Code Online (Sandbox Code Playgroud)

目前我的测试是这样的:

describe('Testing LoginScreen', () => {
  it('should render correctly', async () => {
    const { toJSON } = render(<MockedNavigator component={LoginScreen} />);
    await act(async () => await flushMicrotasksQueue());
    expect(toJSON()).toMatchSnapshot();
  });
});
Run Code Online (Sandbox Code Playgroud)

我的 MockNavigator 看起来像这样:

type MockedNavigatorProps = {
  component: React.ComponentType<any>;
  params?: {};
};

const Stack = createStackNavigator();
const MockedNavigator = (props: MockedNavigatorProps) => {
  return (
    <MockedStorage>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name='MockedScreen'
            component={props.component}
            initialParams={props.params}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </MockedStorage>
  );
};

export default MockedNavigator;
Run Code Online (Sandbox Code Playgroud)

这是我创建存储的方式:

import 'react-native-gesture-handler';
import * as React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from '../src/AppState/store';

type MockedStorageProps = {
  children: any;
};

const MockedStorage = (props: MockedStorageProps) => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {props.children}
      </PersistGate>
    </Provider>
  );
};

export default MockedStorage;
Run Code Online (Sandbox Code Playgroud)

Lor*_*ley 20

我使用存储库上的问题中的建议解决了同样的错误redux-persist: https: //github.com/rt2zz/redux-persist/issues/1243#issuecomment-692609748

(它还有避免在测试中记录错误的副作用redux-logger。)

jest.mock('redux-persist', () => {
  const real = jest.requireActual('redux-persist');
  return {
    ...real,
    persistReducer: jest
      .fn()
      .mockImplementation((config, reducers) => reducers),
  };
});
Run Code Online (Sandbox Code Playgroud)

@亚历克斯布拉齐尔:

它基本上只是通过直接返回减速器来绕过 redux-persist,而不将它们包装在 redux-persist 中。

  • 应用此方法有效,但我最终遇到了一个新问题,其中我的所有渲染均为空。这是因为传递到 PersistGate 的 null 可以在测试中通过添加 `jest.mock('redux-persist/integration/react', () =&gt; ({ PersistGate: (props: any) =&gt; props .children, }));` 有了这两个功能,我的测试运行良好。 (7认同)