Sample.tsx ans SampleTests.tsx (How "rendering" deals with React Elements, and only react elements)

gistfile1.txt

//Sample.tsx

import * as React from 'react';

export function Tiny(props: any) {
  return (
    <div id="tiny" ></div>
  );
}

export function Large(props: any) {
  return (
    <div id="large" ></div>
  );
}

export function Sample(props: {slot: any}) {
  return (
    <div>
      <props.slot />
    </div>
  );
}



// SampletTests.tsx
import * as React from 'react';

import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
import { Large, Sample, Tiny } from '../../../../../src/app/contexts/Sample';


describe.only('', () => {
  // it('should deep render', () => {
  //   const mounted: ReactWrapper = mount(<Sample slot={true}/>);
  //   expect(mounted.find(Tiny)).to.have.lengthOf(1);
  // });

  it('shallow render- Tiny', () => {
    const shallowed: ShallowWrapper = shallow(<Sample slot={Tiny}/>);
    /*tslint:disable*/
    console.log('foo......................................');
    expect(shallowed.find(Tiny)).to.have.lengthOf(1);
    expect(shallowed.find(Large)).to.have.lengthOf(0);
  });


  it('shallow render- Large', () => {
    const shallowed: ShallowWrapper = shallow(<Sample slot={Large}/>);
    expect(shallowed.find(Tiny)).to.have.lengthOf(0);
    expect(shallowed.find(Large)).to.have.lengthOf(1);
  });
});


// TelemetryConsumerWarpper.tsx

import * as React from 'react';

export const telemetryConsumerWrapper = (ContextConsumer: any, childFunction: any) =>
  <ContextConsumer>
    {(telemetryHandler: any) => telemetryHandler(childFunction)}
  </ContextConsumer>;

// TelemetryConsumerWarpperTests.tsx

import * as React from 'react';

import { mount, ReactWrapper } from 'enzyme';
import { Tiny } from '../../../../../src/app/contexts/Sample';
import { telemetryConsumerWrapper } from '../../../../../src/app/contexts/TelemetryConsumerWrapper';

describe.only('telemetryConsumerWrapper' , () => {
  const sampleContext: React.Context<() => void> = React.createContext(() =>{});

  it('should wrap the child function with passed context consumer-Actual consumer', () => {
    const wrapped: React.ReactElement = telemetryConsumerWrapper(sampleContext.Consumer, () => {
      return (<div className="foo"></div>);
    });
    const mounted: ReactWrapper = mount(wrapped);
    expect(mounted.find(sampleContext.Consumer)).to.have.lengthOf(1);
    expect(1).to.equal(1);
  });

  it('should wrap the child function with passed context consumer-Tiny', () => {
    const wrapped: React.ReactElement = telemetryConsumerWrapper(Tiny, () => {
      return (<div className="foo"></div>);
    });
    const mounted: ReactWrapper = mount(wrapped);
    expect(mounted.find(Tiny)).to.have.lengthOf(1);
    expect(1).to.equal(1);
  });
});