dumnmy.js

// Component
import React from 'react';

class ModuleLoader extends React.Component {
  state = {
    Module: null,
  };
  componentDidMount() {
    this.props.Module().then(loaded => {
      this.setState({ Module: loaded.default });
    });
  }
  render() {
    const { Module, error } = this.state;
    if (error) return <span>error</span>;
    if (!Module) return <span>loading</span>;
    return <Module {...this.props} />;
  }
}

export default ModuleLoader;



// Test
import React from 'react';
import { mount } from 'enzyme';
import ModuleLoader from '../module-loader';

it('renders', async () => {
  const props = {
    Module: () =>
      Promise.resolve({
        default: () => <span>Im loaded!</span>,
      }),
  };
  const component = mount(<ModuleLoader {...props} />);
  expect(component).toMatchSnapshot();
  await Promise.resolve(); // tick so promises resolve
  expect(component.update()).toMatchSnapshot();
});




// Generated Snapshots

exports[`renders 1`] = `
<ModuleLoader
  Module={[Function]}
>
  <span>
    loading
  </span>
</ModuleLoader>
`;

exports[`renders 2`] = `
<ModuleLoader
  Module={[Function]}
>
  <_default
    Module={[Function]}
  >
    <span>
      Im loaded!
    </span>
  </_default>
</ModuleLoader>
`;