Как подождать, пока Redux Persist не затвердеет до окончания теста

У меня есть следующий код:

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

export default App;

который использует resx-persist для регидратации состояния, и до того, как он будет завершен, он покажет, что сидит в свойстве загрузки. У меня есть тест Jest (только по умолчанию, который поставляется с реакцией native из коробки):

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

но хотя тест проходит, я вижу, что действия, которые persist/PERSIST и persist/PERSIST persist/REHYDRATE, все еще происходят, а значение, напечатанное на консоли в тесте (результат вывода):

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

То, что я хочу сделать, это подождать до тех пор, пока у вас не закончится удержание гидратации, а затем проверьте полученное значение. Как я могу это сделать?

Ответы

Ответ 1

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

вам просто нужно export persistor из файла приложения, а затем использовать приведенный выше код для тестирования. он отлично работает, я тестировал.

Вы можете заметить, что объект persistor может подписаться с обратным вызовом, который выполняется, когда хранилище редукции регидратируется.

Ответ 2

Вы могли бы издеваться над PersistGate чтобы всегда возвращать props.children Затем ваш тест может проверить отображаемое значение.

Здесь, как создать макет:

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

Кредиты.