Loading component with (deprecated) react-loader

Loader.js

import React from 'react';
import PropTypes from 'prop-types';
import Loadable from 'react-loadable';
import Loading from 'Components/Loading/Loading';
import styled from 'styled-components';
import global from 'Styles/global';

export const LoadingContainer = styled.div`
  align-items: center;
  display: ${global.ifProp('pastDelay', 'flex', 'none')};
  justify-content: center;
  width: 100%;
`;

/**
 * Create a loading component as a separate variable here to specify whether to
 * show error messages or not, in the event of a Loadable failure. In this case we
 * do want to display any error messages.
 *
 * The <LoadingContainer /> component accepts a pastDelay boolean to determine
 * if the loading animation shows or now. This boolean corresponds to
 * react-loadable's delay option
 */
export const LoadingComponent = ({ pastDelay }) => (
  <LoadingContainer pastDelay={pastDelay}>
    <Loading />
  </LoadingContainer>
);

LoadingComponent.propTypes = {
  /**
   * React-loadable prop that corresponds to `delay` option
   */
  pastDelay: PropTypes.bool,
};

LoadingComponent.defaultProps = {
  pastDelay: false,
};

/**
 * LoadablePage is a higher order component for react-loadable
 *
 * @see {@link https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md | React Router Route}
 *
 * This component utilizes `react-loadable` to dynamically import a page component
 *
 * @see {@link https://github.com/jamiebuilds/react-loadable | React Loadable}
 *
 * While the `<Page />` is being loaded, a `<Loading />` will appear
 */
const LoadablePage = ({ loader }) =>
  Loadable({
    loader,
    loading: LoadingComponent,
  });

LoadablePage.propTypes = {
  loader: PropTypes.func.isRequired,
};

export default LoadablePage;

Loader.spec.js

import React from 'react';
import { shallow } from 'enzyme';
import MockLoadable from 'react-loadable';

import LoadablePage, { LoadingComponent } from './LoadablePage';

jest.mock('react-loadable');

// Mock module
jest.mock('Components/Loading/Loading', () => 'Loading');

describe('<LoadablePage />', () => {
  test('#render()', () => {
    shallow(<LoadablePage loader={() => 'path/to/component'} />);

    expect(MockLoadable).toHaveBeenCalled();
  });
});

describe('<LoadingComponent />', () => {
  test('#render()', () => {
    const loadingComponent = shallow(<LoadingComponent pastDelay />);

    expect(loadingComponent).toMatchSnapshot();
  });
});