Testing for https://gist.github.com/nickytonline/c758bcbc79e3ca435310bb847fae2c88

hoc-cdc-tests.js

import test from 'ava';
import React from 'react';
import { shallow } from 'enzyme';
import CaptureError from '../CaptureError';

const render = ({
  ComponentToWrap,
  ErrorComponent,
  environment = 'development',
}) => {
  const ErrorBoundaryComponent = CaptureError({
    ComponentToWrap,
    ErrorComponent,
    environment,
  });

  return shallow(<ErrorBoundaryComponent />);
};

const DummyComponent = () => <div>hello world</div>;
const FriendlyError = () => <div>oh no!</div>;
const ErroredComponent = () => {
  throw new Error('Oh no!');
};

test('Should render the component to wrap if there are no errors.', t => {
  const wrapper = render({
    ComponentToWrap: DummyComponent,
    ErrorComponent: FriendlyError,
  });

  t.true(wrapper.equals(<DummyComponent />));
});

// TODO: Get this skipped test working. The HOC works properly but I'm having issues testing the rendering
// when cDC is at play. At the moment, wrapper.html() simply returns the text Error: 'oh no!' which corresponds
// to the error thrown by <ErroredComponent />.
// I've subscribed to https://github.com/airbnb/enzyme/issues/1255 which seems to be related, but no answers there
// yet.
test.skip(
  'Should render the <FriendlyError /> component if the environment is production and there are errors.',
  t => {
    const wrapper = render({
      ComponentToWrap: ErroredComponent,
      ErrorComponent: FriendlyError,
      environment: 'production',
    });

    t.true(wrapper.equals(<FriendlyError />));
  },
);