From 740370eb606f84c9eceaed3a1287bef716f2e37e Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Tue, 30 Mar 2021 01:48:58 +0200 Subject: [PATCH] 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 | 1 - .../analyticsMock.js => analytics/__mocks__/index.js} | 0 client/src/client-only-routes/ShowSettings.test.js | 2 ++ client/src/components/Header/Header.test.js | 4 +++- client/src/components/Intro/Intro.test.js | 4 +++- client/src/components/landing/Landing.test.js | 4 +++- client/src/components/profile/Profile.test.js | 4 +++- client/src/components/settings/Certification.test.js | 4 +++- client/src/redux/failed-updates-epic.test.js | 4 +++- client/src/redux/ga-saga.test.js | 4 ++++ .../templates/Challenges/components/CompletionModal.test.js | 4 +++- client/utils/gatsby/layoutSelector.test.js | 4 +++- 12 files changed, 30 insertions(+), 9 deletions(-) rename client/src/{__mocks__/analyticsMock.js => analytics/__mocks__/index.js} (100%) diff --git a/client/jest.config.js b/client/jest.config.js index 4254cc1e5bc..94d6f71b77e 100644 --- a/client/jest.config.js +++ b/client/jest.config.js @@ -6,7 +6,6 @@ module.exports = { '^(?!.*\\.module\\.css$).*\\.css$': '/src/__mocks__/styleMock.js', // CSS Modules - match files that end with 'module.css' '\\.module\\.css$': 'identity-obj-proxy', - analytics: '/src/__mocks__/analyticsMock.js', 'react-i18next': '/src/__mocks__/react-i18nextMock.js' }, testPathIgnorePatterns: ['/node_modules/', '/.cache/'], diff --git a/client/src/__mocks__/analyticsMock.js b/client/src/analytics/__mocks__/index.js similarity index 100% rename from client/src/__mocks__/analyticsMock.js rename to client/src/analytics/__mocks__/index.js diff --git a/client/src/client-only-routes/ShowSettings.test.js b/client/src/client-only-routes/ShowSettings.test.js index 30957bc09de..81dde8395fd 100644 --- a/client/src/client-only-routes/ShowSettings.test.js +++ b/client/src/client-only-routes/ShowSettings.test.js @@ -7,6 +7,8 @@ import { ShowSettings } from './ShowSettings'; const { apiLocation } = envData; +jest.mock('../analytics'); + describe('', () => { it('renders to the DOM when user is logged in', () => { const shallow = new ShallowRenderer(); diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js index b946c17b3fc..5ff50f0c2e7 100644 --- a/client/src/components/Header/Header.test.js +++ b/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('', () => { const UniversalNavProps = { displayMenu: false, diff --git a/client/src/components/Intro/Intro.test.js b/client/src/components/Intro/Intro.test.js index 9f442dfc806..8ef23760f0b 100644 --- a/client/src/components/Intro/Intro.test.js +++ b/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({ui}); } diff --git a/client/src/components/landing/Landing.test.js b/client/src/components/landing/Landing.test.js index c69ebb30e2d..dc1b0e88913 100644 --- a/client/src/components/landing/Landing.test.js +++ b/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('', () => { it('renders when visiting index page and logged out', () => { const shallow = new ShallowRenderer(); diff --git a/client/src/components/profile/Profile.test.js b/client/src/components/profile/Profile.test.js index 71b255d9bd3..7d509aeca95 100644 --- a/client/src/components/profile/Profile.test.js +++ b/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: { diff --git a/client/src/components/settings/Certification.test.js b/client/src/components/settings/Certification.test.js index 23dca4fa1bf..1b82dc440ba 100644 --- a/client/src/components/settings/Certification.test.js +++ b/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({ui}); } diff --git a/client/src/redux/failed-updates-epic.test.js b/client/src/redux/failed-updates-epic.test.js index 45607e9ee50..6d5642b78d5 100644 --- a/client/src/redux/failed-updates-epic.test.js +++ b/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', () => { diff --git a/client/src/redux/ga-saga.test.js b/client/src/redux/ga-saga.test.js index 08f39b8d03a..727f92aee5d 100644 --- a/client/src/redux/ga-saga.test.js +++ b/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 }; diff --git a/client/src/templates/Challenges/components/CompletionModal.test.js b/client/src/templates/Challenges/components/CompletionModal.test.js index c4755af8636..370b51232ca 100644 --- a/client/src/templates/Challenges/components/CompletionModal.test.js +++ b/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', diff --git a/client/utils/gatsby/layoutSelector.test.js b/client/utils/gatsby/layoutSelector.test.js index ebb77a0ef26..a0c60bf6e58 100644 --- a/client/utils/gatsby/layoutSelector.test.js +++ b/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();