@applicaster/zapp-react-native-app/App/__tests__/app.test.js

Zapp App Component for Applicaster's Quick Brick React Native App

import React from "react";
import { shallow } from "enzyme";
import { shallowToJson } from "enzyme-to-json";
import configureStore from "redux-mock-store";
import * as R from "ramda";

const MockNetInfo = {
  connection: { type: "none " },
};

class NativeEventEmitter {
  constructor(eventEmitter) {
    this.eventEmitter = eventEmitter;
    this.listeners = [];

    this.removeListener = this.removeListener.bind(this);
  }

  removeListener(index) {
    this.listeners = R.remove(index, 1)(this.listeners);
  }

  addListener(name, callback) {
    const listener = {
      name,
      callback,
    };

    this.listeners.push(listener);

    return {
      remove: () => {
        const index = this.listeners.length;
        this.removeListener(index);
      },
    };
  }
}

jest.mock("@react-native-community/netinfo", () => {
  return {
    ...MockNetInfo,
    addEventListener: jest.fn().mockImplementation((name, cb) => {
      cb(MockNetInfo.connection);
    }),
    removeEventListener: jest.fn(),
    configure: jest.fn(),
  };
});

// silences the errors related to React-native-gesture-handler in tests
jest.mock(
  "@applicaster/quick-brick-core/App/ModalProvider/ModalBottomSheet",
  () => () => null
);

jest.mock(
  "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation",
  () => ({ withModalAnimationProvider: () => null })
);

jest.mock("react-native-safe-area-context", () => ({
  SafeAreaProvider: jest.fn(
    () =>
      ({ children }) =>
        children
  ),
  initialWindowMetrics: {},
}));

jest.mock("react-native", () => {
  const RNMock = jest.genMockFromModule("react-native");

  return {
    ...RNMock,
    Keyboard: {
      dismiss: jest.fn(),
    },
    Platform: {
      OS: "ios",
      isTV: false,
      select: jest.fn(),
    },
    StyleSheet: {
      create: (obj) => obj,
    },
    requireNativeComponent: jest.fn(),
    NativeModules: {
      QuickBrickCommunicationModule: {
        quickBrickEvent: jest.fn(),
        accountId: 123,
        accountsAccountId: "accountsAccountIDString1234",
        broadcasterId: 145,
        bundleIdentifier: "com.apptestname",
        initialProps: {
          foo: "bar",
        },
      },
      UIManager: {},
    },
    NativeEventEmitter: NativeEventEmitter,
    Easing: {
      in: jest.fn(),
      bezier: jest.fn(),
      poly: jest.fn(),
      out: jest.fn(),
    },
    Dimensions: {
      get: jest.fn(() => ({ height: 800 })),
    },
  };
});

jest.mock("react-native-svg", () => {
  const SvgXml = (props) => <View {...props} mock="SvgXml" />;

  return { SvgXml };
});

jest.mock("react-native-webview", () => {
  return {
    WebView: jest.fn(() => <View mock="react-native-webview" />),
  };
});

const { View } = require("react-native");
const { ZappApp } = require("../../index");

const dimensions = { window: { height: 1337, width: 750 } };

const store = configureStore()({});

const Screen = () => <View />;
Screen.displayName = "Screen";

const AppContainer = ({ children }: any) => <View>{children(dimensions)}</View>;
AppContainer.displayName = "AppContainer";

const runtimeConfigurationUrls = {
  cell_styles_url: "http://zapp.com/cell_styles.json",
};

const zappAppProps = {
  components: {
    Screen,
    AppContainer,
  },
  rivers: [
    { id: "1", home: false },
    { id: 2, home: true },
  ],
  styles: { color: "blue" },
  appSettings: {
    runtimeConfigurationUrls,
  },
  dispatch: jest.fn(),
};

describe("<ZappApp />", () => {
  it("renders correctly", () => {
    const wrapper = shallow(<ZappApp {...zappAppProps} store={store} />);

    expect(shallowToJson(wrapper)).toMatchSnapshot();
  });
});