Proof of concept: Building a react app using Dject as an IoC container

App.js

import logo from './logo.svg';
import './App.css';

function AppFactory(React) {

  const { Component } = React;

  class App extends Component {
    render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
                  </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
                  </a>
          </header>
        </div>
      );
    }
  }

  return App;

}

export default {
  moduleValue: AppFactory,
  moduleName: 'App'
};

App.test.js

import React from 'react';
import ReactDOM from 'react-dom';

global.dject = require('dject');

describe('Base application', function () {
  
  let App;
  
  beforeEach(function (done) {

    import('../ioc-registrations').then(function (result){
      const testContainer = result.default.new();


      App = testContainer.build('App');
      
      done();
    });
  });

  it('renders without crashing', () => {
    const div = document.createElement('div');

    ReactDOM.render(<App />, div);
    
    ReactDOM.unmountComponentAtNode(div);
  });
  
});

container.js

if (typeof window.window.container === 'undefined') {
    window.container = window.dject.new({});

    window.container.registerImport = function ({moduleValue, moduleName}) {
        window.container.register(moduleValue, moduleName);
    };
    
}


export default window.container;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import * as serviceWorker from './serviceWorker';

import container from './ioc-registrations';

const App = container.build('App');

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

ioc-registrations

import container from './container';

import reactRegistration from './wrappedModules/react';
import appRegistration from './App';

container.registerImport(appRegistration);
container.registerImport(reactRegistration);

export default container;

react-wrapped.js

import React from 'react';

export default {
    moduleValue: () => React,
    moduleName: 'React'
};