How to use react-component-tree - 10 common examples

function render(extraParams) {
    // Alow tests to extend fixture before rendering
    _.merge(params, extraParams);

    component = ComponentTree.render({
      component: ComponentPlayground,
      snapshot: params,
      container: document.createElement('div')
    });
  };

function render(extraProps) {
    // Alow tests to extend fixture before rendering
    _.merge(params, extraProps);

    component = ComponentTree.render({
      component: ComponentPlayground,
      snapshot: params,
      container: document.createElement('div')
    });
  };

function render(extraParams) {
    // Alow tests to extend fixture before rendering
    _.merge(params, extraParams);

    component = ComponentTree.render({
      component: ComponentPlayground,
      snapshot: params,
      container: document.createElement('div')
    });

    if (params.component) {
      childParams = component.children.preview.call(component);
    }
  }

function render(extraProps) {
    // Alow tests to extend fixture before rendering
    _.merge(params, extraProps);

    component = ComponentTree.render({
      component: ComponentPlayground,
      snapshot: params,
      container: document.createElement('div')
    });
    $component = $(component.getDOMNode());
  }

beforeEach(function() {
    sinon.stub(console, 'error');

    // Don't render any children
    sinon.stub(ComponentTree.loadChild, 'loadChild');

    params = {
      components: {},
      router: {
        routeLink: sinon.spy()
      }
    };
  });

beforeEach(function() {
    // Don't render any children
    sinon.stub(ComponentTree.loadChild, 'loadChild');

    params = {
      components: {
        FirstComponent: {
          class: 'FirstComponent',
          fixtures: {
            'default state': {}
          }
        }
      },
      router: {
        routeLink: sinon.spy()
      }
    };
  });

beforeEach(function() {
    // Don't render any children
    sinon.stub(ComponentTree.loadChild, 'loadChild');

    params = {
      components: {
        FirstComponent: {
          fixtures: {
            'blank state': {},
            'error state': {},
            'simple state': {}
          }
        },
        SecondComponent: {
          fixtures: {
            'simple state': {}
          }
        }
      },

try {
    component = React.render(React.createElement(
        Component, props, fixture.children),
        _container);
  } catch (e) {
    throw new Error(
      `The component threw an exception while rendering:\n ${e.message}`);
  }

  if (fixture.state) {
    // Injecting state will trigger a new render cycle and we only care about
    // the calls caused by the last render
    sandbox.reset();

    ComponentTree.injectState(component, fixture.state);
  }

  return component;
}

import ExampleComponent from 'react-deep-diff'

const last = array => array[array.length - 1]
const first = array => array[0]
const second = array => array[1]
const beforeLast = array => array[array.length - 2]

const el1 = <div>
  Hello
  <span>Wor<span>What up</span></span>
</div>


console.log('wat', serialize(el1))

const serialized = serialize(el1)

// console.log('json react', JSON.stringify(el1))
// 
// const el2 = <div>
//   Hello
//   <span>World<span>how do you do</span></span>
//   <div>
//     <h1>This is a new Element</h1>
//   </div>
// </div>
// 
// // path be like ["props", "children", 1, "props", "children", 1, "props", "children"]
// const changeReactElement = (element, path, change, renderChange) =&gt; {
//   // first path has to always be props, if not return element
//   console.log('path', path)
//   if (path[0] !== 'props') {

import takeWhile from 'lodash/takeWhile'
import { serialize, render } from 'react-component-tree'
import ExampleComponent from 'react-deep-diff'

const last = array => array[array.length - 1]
const first = array => array[0]
const second = array => array[1]
const beforeLast = array => array[array.length - 2]

const el1 = <div>
  Hello
  <span>Wor<span>What up</span></span>
</div>


console.log('wat', serialize(el1))

const serialized = serialize(el1)

// console.log('json react', JSON.stringify(el1))
// 
// const el2 = <div>
//   Hello
//   <span>World<span>how do you do</span></span>
//   <div>
//     <h1>This is a new Element</h1>
//   </div>
// </div>
// 
// // path be like ["props", "children", 1, "props", "children", 1, "props", "children"]
// const changeReactElement = (element, path, change, renderChange) =&gt; {
//   // first path has to always be props, if not return element