web-dev-qa-db-ja.com

テストを終了する前にRedux Persistが再水和するのを待つ方法

私は次のコードを持っています：

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

export default App;

これは状態を再水和するためにredux-persistを使用し、これが完了する前に、loadingプロパティに何が置かれているかを示します。私はJestテストを持っています（そのままの状態でreactネイティブに付属するデフォルトのテストのみ）：

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がハイドレーションを完了するまで待ってから、レンダリングされた値を確認します。これどうやってするの？

reactjsreact-nativejestjsredux-persist
14
user4184113
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();
  });
});

アプリファイルからexportpersistorを作成し、上記のコードを使用してテストするだけです。それは完全に動作し、私はテストしました。

persistorオブジェクトはコールバックでサブスクライブでき、これはreduxストアが再水和したときに実行されます。

2
Inus Saha

PersistGateをモックして常にprops.childrenを返すようにすると、テストでレンダリングされた値を確認できます。

モックを作成する方法は次のとおりです。

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

クレジット 。

1
Jordan Enev