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 4254cc1e5b..94d6f71b77 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 30957bc09d..81dde8395f 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 b946c17b3f..5ff50f0c2e 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 9f442dfc80..8ef23760f0 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 c69ebb30e2..dc1b0e8891 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 71b255d9bd..7d509aeca9 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 23dca4fa1b..1b82dc440b 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 45607e9ee5..6d5642b78d 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 08f39b8d03..727f92aee5 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 c4755af863..370b51232c 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 ebb77a0ef2..a0c60bf6e5 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();