Inferno Component Unit-Test

ExpandableBlock.jsx

import { linkEvent } from 'inferno';
import {
  compose,
  withState
} from 'incompose';
import classnames from 'classnames';

const toggle = (props) => props.toggle(!props.hidden);

const ExpandableBlock = (props) => {
  const className = classnames('expandable-block', props.className);

  return (
    <div className={className}>
      <a href='#' onClick={linkEvent(props, toggle)}>Expand</a>
      <div className='expandable-block-content' hidden={props.hidden}>
        {props.children}
      </div>
    </div>
  );
};

const withHiddenState = withState('hidden', 'toggle', true);

export default compose(
  withHiddenState,
)(ExpandableBlock);

ExpandableBlock.test.jsx

import {
  renderIntoDocument,
  findRenderedVNodeWithType,
  findAllInRenderedTree,
  findAllInVNodeTree
} from 'inferno-test-utils';
import ExpandableBlock from './expandable-block';
import { hasClass } from '../../lib/utils';

const clearDOM = () => document.body.innerHTML = null;

describe('ExpendableBlock Component', () => {
  afterEach(clearDOM)

  it('has an expand handler', () => {
    const renderedTree = renderIntoDocument(<ExpandableBlock />);
    const vNode = findRenderedVNodeWithType(renderedTree, 'a');

    expect(vNode).toBeDefined();
  });

  it('shows the content after using expand', () => {
    jest.useFakeTimers();
    
    const renderedTree = renderIntoDocument(<ExpandableBlock><p>MY CONTENT</p></ExpandableBlock>);
    const vNode = findRenderedVNodeWithType(renderedTree, 'a');

    expect(vNode).toBeDefined();

    vNode.dom.click();

    jest.runAllTicks();
    jest.runAllTimers();
 
    const hasClassName = (vNode) => hasClass(vNode.className, 'expandable-block-content');
    const result = findAllInRenderedTree(renderedTree, hasClassName);

    expect(result).toHaveLength(1);
    expect(result[0].props.hidden).toBe(false);
  });
});