Mock Relay

component.storybook.js

import React from 'react';
import {storiesOf} from '@kadira/storybook';
import mockRelay from '@loggi/js/mocks/relay';
import {Component} from '../';
import viewer from './fixtures/viewer'; // json data

const relay = {
  variables: {
    foo: {},
    bar: true,
    baz: false
  }
};

storiesOf('Component', module)
.add('default', () => {
  let Component = mockRelay(Component);

  return (
    <Component
      viewer={viewer}
      relay={relay}
    />
  );
});

mock-relay.js

import React, {PropTypes} from 'react';
import Relay from 'react-relay';
import type {RelayContainer} from 'react-relay/src/tools/RelayTypes';

const ROOT_QUERY: Object = {
  name: 'rootQuery',
  params: {},
  queries: {}
};

export default function mockRelay(Component: any): MockRelay {
  return class MockRelay extends React.Component {
    static displayName = 'MockRelay';

    static propTypes = {
      relay: PropTypes.object
    };

    static defaultProps = {
      relay: {}
    };

    render () {
      const Container: RelayContainer = Relay.createContainer(
        Component, {
          fragments: {},
          initialVariables: {...this.props.relay.variables}
        }
      );

      return (
        <Relay.Renderer
          render={() => <Container {...this.props} />}
          Container={Container}
          queryConfig={ROOT_QUERY}
          environment={Relay.Store}
        />
      );
    }
  };
}

Relay.injectNetworkLayer({
  sendMutation() {
    return new Promise(resolve => resolve());
  },

  sendQueries() {
    return new Promise(resolve => resolve());
  },

  supports() {
    return true;
  }
});

test-mock-relay.js

import React from 'react';
import {isContainer, Renderer} from 'react-relay';
import mockRelay from '../relay';
import {shallow} from 'enzyme';

describe('RelayHOC', () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it('should get a RelayRenderer component with the passed component as Container prop', () => {
    const RelayComponent = mockRelay('div');
    const Component = shallow(<RelayComponent />);

    expect(Component.dive().find(Renderer).length).toBe(1);
    expect(isContainer(Component.prop('Container'))).toBe(true);
  });
});