refactor: explicit mocking for analytics (#41562)

The previous approach did avoid a fair number of jest.mock calls, but
made debugging the tests harder. If you don't know about the mapping
it's unclear why the imported module does not behave as normal.

By forcing the use of jest.mock it means that the answer to that
question is in the test you are working on.

client/jest.config.js

@@ -6,7 +6,6 @@ module.exports = {
     '^(?!.*\\.module\\.css$).*\\.css$': '<rootDir>/src/__mocks__/styleMock.js',
     // CSS Modules - match files that end with 'module.css'
     '\\.module\\.css$': 'identity-obj-proxy',
-    analytics: '<rootDir>/src/__mocks__/analyticsMock.js',
     'react-i18next': '<rootDir>/src/__mocks__/react-i18nextMock.js'
   },
   testPathIgnorePatterns: ['/node_modules/', '<rootDir>/.cache/'],

client/src/client-only-routes/ShowSettings.test.js

@@ -7,6 +7,8 @@ import { ShowSettings } from './ShowSettings';
 
 const { apiLocation } = envData;
 
+jest.mock('../analytics');
+
 describe('<ShowSettings />', () => {
   it('renders to the DOM when user is logged in', () => {
     const shallow = new ShallowRenderer();

client/src/components/Header/Header.test.js

@@ -1,4 +1,4 @@
-/* global expect */
+/* global expect jest */
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
@@ -10,6 +10,8 @@ import envData from '../../../../config/env.json';
 
 const { apiLocation, clientLocale } = envData;
 
+jest.mock('../../analytics');
+
 describe('<UniversalNav />', () => {
   const UniversalNavProps = {
     displayMenu: false,

client/src/components/Intro/Intro.test.js

@@ -1,4 +1,4 @@
-/* global expect */
+/* global expect jest */
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { Provider } from 'react-redux';
@@ -6,6 +6,8 @@ import { createStore } from '../../redux/createStore';
 
 import Intro from './';
 
+jest.mock('../../analytics');
+
 function rendererCreateWithRedux(ui) {
   return renderer.create(<Provider store={createStore()}>{ui}</Provider>);
 }

client/src/components/landing/Landing.test.js

@@ -1,10 +1,12 @@
-/* global expect */
+/* global expect jest */
 import React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 
 import IndexPage from '../../pages';
 import mockChallengeNodes from '../../__mocks__/challenge-nodes';
 
+jest.mock('../../analytics');
+
 describe('<Landing />', () => {
   it('renders when visiting index page and logged out', () => {
     const shallow = new ShallowRenderer();

client/src/components/profile/Profile.test.js

@@ -1,10 +1,12 @@
-/* global expect */
+/* global expect jest */
 
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import Profile from './Profile';
 
+jest.mock('../../analytics');
+
 const userProps = {
   user: {
     profileUI: {

client/src/components/settings/Certification.test.js

@@ -1,4 +1,4 @@
-/* global expect */
+/* global expect jest */
 
 import React from 'react';
 import { render } from '@testing-library/react';
@@ -7,6 +7,8 @@ import { createStore } from '../../redux/createStore';
 
 import { CertificationSettings } from './Certification';
 
+jest.mock('../../analytics');
+
 function renderWithRedux(ui) {
   return render(<Provider store={createStore()}>{ui}</Provider>);
 }

client/src/redux/failed-updates-epic.test.js

@@ -1,4 +1,4 @@
-/* global expect */
+/* global expect jest */
 
 import { Subject } from 'rxjs';
 import { ActionsObservable, StateObservable } from 'redux-observable';
@@ -6,6 +6,8 @@ import failedUpdatesEpic from './failed-updates-epic';
 import { types } from './';
 import store from 'store';
 
+jest.mock('../analytics');
+
 const key = 'fcc-failed-updates';
 
 describe('failed-updates-epic', () => {

client/src/redux/ga-saga.test.js

@@ -1,8 +1,12 @@
+/* global jest */
+
 import { types } from '.';
 import { createGaSaga } from './ga-saga';
 import ga from '../analytics';
 import { expectSaga } from 'redux-saga-test-plan';
 
+jest.mock('../analytics');
+
 describe('ga-saga', () => {
   it('calls GA after executeGA action', () => {
     const GaTypes = { event: ga.event, page: ga.pageview, modal: ga.modalview };

client/src/templates/Challenges/components/CompletionModal.test.js

@@ -1,7 +1,9 @@
-/* global expect */
+/* global expect jest */
 
 import { getCompletedPercent } from './CompletionModal';
 
+jest.mock('../../../analytics');
+
 const completedChallengesIds = ['1', '3', '5'],
   currentBlockIds = ['1', '3', '5', '7'],
   id = '7',

client/utils/gatsby/layoutSelector.test.js

@@ -1,4 +1,4 @@
-/* global expect */
+/* global expect jest */
 import React from 'react';
 import { Provider } from 'react-redux';
 import ShallowRenderer from 'react-test-renderer/shallow';
@@ -9,6 +9,8 @@ import FourOhFourPage from '../../src/pages/404';
 import Learn from '../../src/pages/learn';
 import Certification from '../../src/pages/certification';
 
+jest.mock('../../src/analytics');
+
 const store = createStore();
 function getComponentNameAndProps(elementType, pathname) {
   const shallow = new ShallowRenderer();