snapshot testing with enzyme (hack)

Link.react-test.js

// Copyright 2004-present Facebook. All Rights Reserved.
/* eslint-disable no-unused-vars */

'use strict';

import React from 'react';
import Link from '../Link.react';
import { shallow } from 'enzyme';

// not used, but need this import
import renderer from 'react-test-renderer';

// No idea why this is required
jest.mock('react/lib/ReactDefaultInjection')

// trying to copy react-test-renderer logic
const toJson = (el) => {
  const childrenToJson = (c) => (
    (c && c.type) ? toJson(c) : c
  );
  
  const { children, ... props } = el.props;
  const childrenEls = 
    Array.isArray(children)
      ? children 
      : (children ? [children] : []);
      
  return {
    type: el.type.name || el.type,
    props: props,
    children: (childrenEls.length) ? childrenEls.map(childrenToJson) : null,
    '$$typeof': Symbol.for('react.test.json')
  };
}

describe('Link', () => {
  it('renders as an anchor when no page is set', () => {
    const wrapper = shallow(
      <Link>Facebook</Link>
    );
    const tree = toJson(wrapper.node);
    expect(tree).toMatchSnapshot();
  });
});

Link.react-test.js.snap

exports[`Link renders as an anchor when no page is set 1`] = `
<a
  className="normal"
  href="#"
  onMouseEnter={[Function bound _onMouseEnter]}
  onMouseLeave={[Function bound _onMouseLeave]}>
  <LinkTitle
    text="Facebook" />
  <LinkTitle
    text="Another title" />
</a>
`;

Link.react.js

import React from 'react';

import LinkTitle from './LinkTitle.react';

const STATUS = {
  NORMAL: 'normal',
  HOVERED: 'hovered',
};

export default class Link extends React.Component {

  constructor() {
    super();

    this._onMouseEnter = this._onMouseEnter.bind(this);
    this._onMouseLeave = this._onMouseLeave.bind(this);

    this.state = {
      class: STATUS.NORMAL,
    };
  }

  _onMouseEnter() {
    this.setState({class: STATUS.HOVERED});
  }

  _onMouseLeave() {
    this.setState({class: STATUS.NORMAL});
  }

  render() {
    return (
      <a
        className={this.state.class}
        href={this.props.page || '#'}
        onMouseEnter={this._onMouseEnter}
        onMouseLeave={this._onMouseLeave}
      >
      
        <LinkTitle text={this.props.children} />
        <LinkTitle text="Another title" />
        
      </a>
    );
  }

}

LinkTitle.test.js

import React from 'react';

export default class LinkTitle extends React.Component {

  render() {
    return (
      <btn>{this.props.text}</btn>
    );
  }

}