A good testing boilerplate with console for React (Ex: with react-waypoint) - See https://codesandbox.io/s/qxyRGMlp3

index.html

<div id="root"></div>

index.js

import React, {Component} from 'react';
import { render } from 'react-dom';
import Waypoint from 'react-waypoint';

let i = 0;
class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      log: ""
    }
  }
  
  log = (args) => {
    console.log(args);
    const l = JSON.stringify(args);
    this.setState({log : this.state.log + "\n" + l});
    if (this.console) this.console.scrollTop = this.console.scrollHeight;
  }
  
  onEnter = ({...args}) => {
    this.log(args);
  }
  
  onLeave = ({...args}) => {
    this.log(args);
  }
  
 render() {
  return (
      <div>
        <h1>Hello World</h1>
        <div style={{ margin: 30 }}>
          <div
            style={{
              height: 250,
              overflowY: 'auto',
              background: '#ddd',
              padding: '0 30px',
            }}
          >
            <div style={{ height: 500 }}>
              <div style={{ height: 50 }} />
              <h2 className="text-center" style={{ margin: "150px auto", backgroundColor: '#eef' }}>
                Object
              </h2>
              <div style={{ height: 1, backgroundColor: '#eef' }}>
                <Waypoint topOffset={"100px"} onEnter={this.onEnter} onLeave={this.onLeave} />
              </div>
              <h2 className="text-center" style={{ backgroundColor: '#eef' }}>
                Object Waypoint
              </h2>
            </div>
          </div>
        </div>
      Console
        <div  ref={(el) => {this.console = el;}}                 
          style={{
            fontFamily: 'monospace',
            whiteSpace: 'pre',
            height: 200,
            overflow: 'auto',
            background: '#eee',
          }}>
          {this.state.log}
        </div>
      </div>
    );
 }
}

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