如何在结束测试之前等待 Redux Persist 补水答案

【问题标题】：How to wait for Redux Persist to rehydrate before ending test如何在结束测试之前等待 Redux Persist 补水
【发布时间】：2018-11-22 13:29:54
【问题描述】：

我有以下代码：

const App = () => {
    return (
        <Provider store={store}>
            <PersistGate persistor={persistor} loading={<Text>Loading!</Text>}>
                <ConnectedRootComponent />
            </PersistGate>
        </Provider>
    );
};

export default App;

它使用 redux-persist 来重新水化状态，在完成之前，它会显示加载属性中的内容。我有一个 Jest 测试（只是开箱即用的 react native 附带的默认测试）：

it('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  console.log("Rendering: " + JSON.stringify(rendered));
  expect(rendered).toBeTruthy();
});

但虽然测试通过了，但我看到persist/PERSIST 和persist/REHYDRATE 的操作仍在发生，并且在测试中打印到控制台的值（呈现的输出）是：

{
    "type": "Text",
    "props": {
        "accessible": true,
        "allowFontScaling": true,
        "ellipsizeMode": "tail"
    },
    "children": ["Loading!"]
}

我要做的是等到redux-persist完成水合，然后检查渲染值。我该怎么做？

【问题讨论】：

您可以向 persistStore 提供回调，该回调将在补液完成时调用。您可能必须相应地修改测试用例。请参考github.com/rt2zz/…

标签： reactjs react-native jestjs redux-persist

【解决方案1】：

您可以模拟PersistGate 以始终返回props.children，然后您的测试可以检查呈现的值。

以下是创建模拟的方法：

jest.mock('redux-persist/integration/react', () => ({
  PersistGate: props => props.children,
}))

Credits.

【讨论】：

【解决方案2】：

import React from 'react';
import App, {persistor} from '../App';

import renderer from 'react-test-renderer';

it('renders without crashing', (done) => {
  const appRendered = renderer.create(<App />);
  persistor.subscribe(function(){
      const rendered = appRendered.toJSON();
      console.log("Rendering: " + JSON.stringify(rendered));
      expect(rendered).toBeTruthy();
      done();
  });
});

你只需要从App文件中exportpersistor，然后使用上面的代码进行测试。效果很好，我已经测试过了。

您可以注意到persistor 对象可以通过回调进行订阅，该回调会在 redux 存储重新水化时执行。

【讨论】：

【解决方案3】：

你可以在测试时忽略持久化

jest.mock('redux-persist/integration/react', () => ({
  PersistGate: props => props.children,
}))
jest.mock('redux-persist', () => ({
  ...jest.requireActual('redux-persist'),
  persistReducer: jest.fn().mockImplementation((config, reducer) => reducer),
}));

【讨论】：