@jetshop/core/hooks/usePreconnectLinks.test.js

import React from 'react';
import { render } from '@testing-library/react';
import { usePreconnectLinks } from './usePreconnectLinks';
import { ConfigProvider } from '@jetshop/core/components/ConfigProvider';

const apolloConfig = {
  graphQLURI: 'http://wow.com'
};

function expectStaticLinks() {
  return [
    expect.objectContaining({
      href: apolloConfig.graphQLURI,
      crossOrigin: null
    }),
    expect.objectContaining({
      href: 'https://cdn.polyfill.io',
      crossOrigin: null
    })
  ];
}

describe('usePreconnectLinks', () => {
  test('by default returns only the base required links', () => {
    const { links } = setup();

    expect(links).toEqual(expect.arrayContaining([...expectStaticLinks()]));
    expect(links.length).toBe(2);
  });
  test('if ga or gtm args are false, return base required linked', () => {
    const { links } = setup({
      opts: { config: Object.assign(apolloConfig, { gtm: false, ga: false }) }
    });

    expect(links).toEqual(expect.arrayContaining([...expectStaticLinks()]));
    expect(links.length).toBe(2);
  });
  test('if ga is true, include ga links', () => {
    const { links } = setup({
      opts: { ga: true, gtm: false }
    });

    expect(links).toEqual(
      expect.arrayContaining([
        ...expectStaticLinks(),
        expect.objectContaining({ href: 'https://www.google.com' })
      ])
    );
    expect(links.length).toBe(5);
  });
  test('if gtm is true, include gtm links', () => {
    const { links } = setup({
      opts: { ga: false, gtm: true }
    });

    expect(links).toEqual(
      expect.arrayContaining([
        ...expectStaticLinks(),
        expect.objectContaining({ href: 'https://www.googletagmanager.com' })
      ])
    );
    expect(links.length).toBe(3);
  });
});

function setup(opts = {}) {
  let returnedLinks;
  const utils = render(
    <Providers config={opts.config}>
      <TestComponent {...opts}>
        {links => {
          returnedLinks = links;

          return null;
        }}
      </TestComponent>
    </Providers>
  );

  return { ...utils, links: returnedLinks };
}

function TestComponent({ opts, children }) {
  const links = usePreconnectLinks(opts);

  return children(links);
}

function Providers(props) {
  return (
    <ConfigProvider config={props.config || { apolloConfig }}>
      {props.children}
    </ConfigProvider>
  );
}