Reactjs 如何在结束试验前等待重复试验持续进行再水化

我有以下代码：

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

export default App;

---

我要做的是等待redux persist完成水合，然后检查渲染值。如何执行此操作？

您可以模拟

PersistGate

始终返回

props.children

，然后您的测试可以检查渲染值

以下是如何创建模拟：

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

.

从“React”导入React；
从“../App”导入应用程序，{persistor}；
从“反应测试渲染器”导入渲染器；
它（'渲染而不崩溃'，（完成）=>{
const appendered=renderer.create（）；
persistor.subscribe（函数（）{
const rendered=appended.toJSON（）；
log（“呈现：+JSON.stringify（呈现））；
expect（rendered.toBeTruthy（）；
完成（）；
});
});

您只需从应用程序文件中导出

持久器
，然后使用上面的代码进行测试。我已经测试过了，它工作得很好

您可以注意到，
persistor
对象可以使用回调进行订阅，该回调在redux存储重新水化后执行。
您可以在使用进行测试时忽略persist

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),
}));

您可以提供对persistStore的回调，在补液完成时将调用该回调。您可能必须相应地修改测试用例。请参阅
jest.mock('redux-persist/integration/react', () => ({
  PersistGate: props => props.children,
}))

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();
  });
});

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),
}));