React Boilerplate Gist

AdminListComposer.spec.js

import React from "react";
import { mount } from "enzyme";
import renderer from "react-test-renderer";
import { setMockGraphQLProps, setMockGraphQLErrorProps } from "react-apollo";
import AdminListComposer from "../../../bundles/admin/composers/AdminListComposer";

const EmptyComponent = () => null;
const EnhancedComponent = AdminListComposer(props => (
  <EmptyComponent {...props} />
));

describe("adminListComposer", () => {
  describe("when admins are fetched", () => {
    test("it should match snapshot", () => {
      const wrapper = mount(<EnhancedComponent />);
      const enhancedComponent = wrapper.find(EmptyComponent);
      expect(enhancedComponent.props()).toMatchSnapshot();
    });

    test("it should rendered the 2 admins", () => {
      const wrapper = mount(<EnhancedComponent />);
      const enhancedComponent = wrapper.find(EmptyComponent);
      const adminList = enhancedComponent.props().data;
      console.log(enhancedComponent.props());
      expect(adminList.admins.length).toEqual(2);
    });

    test("it should call the mocked function sendInviteMutate", () => {
      const wrapper = mount(<EnhancedComponent />);
      const enhancedComponent = wrapper.find(EmptyComponent);
      const {
        sendInvite,
        sendInviteMutate,
        data: { admins }
      } = enhancedComponent.props();
      sendInvite(admins[0].id);
      expect(sendInviteMutate.mock.calls.length).toBe(1);
    });
  });

  describe("when there is an error", () => {
    test("it should match snapshot", () => {
      setMockGraphQLErrorProps(true);
      const wrapper = mount(<EnhancedComponent />);
      const enhancedComponent = wrapper.find(EmptyComponent);
      expect(enhancedComponent.props()).toMatchSnapshot();
    });
  });
});

errorMockData.js

const adminList = {
  admins: [
    {
      id: 1,
      name: "admin1",
      email: "admin1@eg.com",
      designation: null,
      status: "active",
      admin: true,
      super_admin: false,
      errors: [{ key: "error", message: "error message" }]
    },
    {
      id: 2,
      name: "admin2",
      email: "admin2@eg.com",
      designation: null,
      status: "active",
      admin: true,
      super_admin: false,
      errors: []
    }
  ]
};

const admin = adminList.admins[0];

const sendInviteMutate = {
  sendInviteMutate: jest
    .fn()
    .mockReturnValueOnce(Promise.resolve({ data: { sendInvite: admin } }))
};

const errorMockData = {
  admins: adminList,
  sendInvite: sendInviteMutate
};

export default errorMockData;

mockData.js

const adminList = {
  admins: [
    {
      id: 1,
      name: "admin1",
      email: "admin1@eg.com",
      designation: null,
      status: "active",
      admin: true,
      super_admin: false,
      errors: []
    },
    {
      id: 2,
      name: "admin2",
      email: "admin2@eg.com",
      designation: null,
      status: "active",
      admin: true,
      super_admin: false,
      errors: []
    }
  ]
};

const admin = adminList.admins[0];

const sendInviteMutate = {
  sendInviteMutate: jest
    .fn()
    .mockReturnValueOnce(Promise.resolve({ data: { sendInvite: admin } }))
};

const mockData = {
  admins: adminList,
  sendInvite: sendInviteMutate
};

export default mockData;

react-apollo.js

import React from "react";
import mockData from "./mockData";
import errorMockData from "./errorMockData";

const actualReactApollo = require.requireActual("react-apollo");

let mockProps = {};
let errorProps = false;

const setMockGraphQLProps = props => {
  mockProps = props;
};

const setMockGraphQLErrorProps = props => {
  errorProps = true;
};

const graphql = query => Component => props => {
  const operation = query.definitions[0].operation;
  const queryValue = query.definitions[0].name.value;
  const mockedData = mockData[queryValue];

  if (errorProps) {
    if (operation === "mutation") {
      setMockGraphQLProps(errorMockData);
    } else {
      setMockGraphQLProps({ data: errorMockData });
    }
  } else if (operation === "mutation") {
    setMockGraphQLProps(mockedData);
  } else {
    setMockGraphQLProps({ data: mockedData });
  }

  return <Component {...mockProps} {...props} />;
};

const {
  compose,
  createBatchingNetworkInterface,
  ApolloClient
} = actualReactApollo;

export {
  graphql,
  compose,
  setMockGraphQLProps,
  setMockGraphQLErrorProps,
  createBatchingNetworkInterface,
  ApolloClient
};