Upgrade JSDom, Babel, and Jest to resolve _.debounce blowing up in test.

See jestjs/jest#3465
everydayhero · Jun 18, 2020 · d1ea769 · d1ea769
1 parent 096a61b
commit d1ea769
Show file tree

Hide file tree

Showing 28 changed files with 98 additions and 79 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/babel.config.json b/babel.config.json
@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": "> 0.25%, not dead, ie >= 11",
+        "useBuiltIns": "usage",
+        "corejs": "3.6"
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-object-assign"
+  ]
+}
diff --git a/package.json b/package.json
@@ -16,28 +16,31 @@
     "moment": "^2.10.2",
     "numbro": "^1.7.1",
     "paths-js": "^0.4.3",
+    "react": "^15.6.2",
     "react-addons-css-transition-group": "^15.5.2",
     "react-addons-pure-render-mixin": "^15.5.2",
+    "react-dom": "^15.6.2",
     "react-tween-state": "0.1.5",
     "remarkable": "^1.6.0"
   },
   "devDependencies": {
-    "babel-core": "^6.11.4",
-    "babel-jest": "^14.1.0",
-    "babel-plugin-transform-object-assign": "^6.8.0",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-register": "^6.14.0",
-    "babelify": "^7.3.0",
-    "browserify": "~13.0.0",
+    "@babel/core": "^7.10.2",
+    "@babel/plugin-transform-object-assign": "^7.10.1",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/register": "^7.10.1",
+    "babel-jest": "^26.0.1",
+    "babelify": "^10.0.0",
+    "browserify": "^16.5.1",
     "chai": "^3.5.0",
     "compression": "~1.6.1",
+    "core-js": "^3.6.5",
     "enzyme": "^2.4.1",
     "express": "~4.14.0",
     "gulp": "~3.9.1",
     "gulp-autoprefixer": "~3.1.0",
     "gulp-awspublish": "~3.2.0",
-    "gulp-babel": "^6.1.2",
+    "gulp-babel": "^8.0.0",
     "gulp-clean": "^0.3.2",
     "gulp-concat": "~2.6.0",
     "gulp-cssnano": "^2.1.1",
@@ -49,7 +52,8 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "~2.0.0",
     "gulp-util": "~3.0.1",
-    "jest-cli": "^16.0.0",
+    "jest-cli": "^26.0.1",
+    "jsdom": "^16.2.2",
     "jshint-stylish": "~2.2.0",
     "mocha": "^3.0.1",
     "morgan": "~1.7.0",

diff --git a/src/components/address/AddressLookup/__tests__/AddressLookup-test.js b/src/components/address/AddressLookup/__tests__/AddressLookup-test.js
@@ -1,7 +1,7 @@
 jest.disableAutomock()
 jest.mock('../../../../api/address')
 
-jest.useFakeTimers()
+jest.useFakeTimers('modern')
 
 import address from '../../../../api/address'
 import React from 'react'
@@ -142,7 +142,7 @@ describe('AddressLookup', function () {
     beforeEach(function () {
       address.find.mockClear()
       address.search.mockClear()
-      validate = jest.genMockFunction()
+      validate = jest.fn(() => {})
 
       element = TestUtils.renderIntoDocument(<AddressLookup validate={validate} country={'UK'} />)
       element.setList(addressSearchResult)
@@ -187,7 +187,7 @@ describe('AddressLookup', function () {
   })
 
   it('allows you to reset the address', function () {
-    var validate = jest.genMockFunction()
+    var validate = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<AddressLookup validate={validate} address={addressFindResult.address} />)
     var resetButton = findByClass(element, 'AddressLookup__reset')
     TestUtils.Simulate.click(resetButton)

diff --git a/src/components/amount/Amount/__tests__/Amount-tests.js b/src/components/amount/Amount/__tests__/Amount-tests.js
@@ -59,7 +59,7 @@ describe('Amount', function () {
   })
 
   it('exposes selected value through callback', function () {
-    const callback = jest.genMockFunction()
+    const callback = jest.fn(() => {})
     const element = mount(<Amount output={callback} />)
     expect(callback).lastCalledWith(700)
 

diff --git a/src/components/charities/PromoCharitiesResult/__tests__/PromoCharitiesResult-test.js b/src/components/charities/PromoCharitiesResult/__tests__/PromoCharitiesResult-test.js
@@ -29,7 +29,7 @@ describe('PromoCharitiesResult component default rendering', function () {
 })
 
 describe('Component behaviour when clicked or tapped', function () {
-  var callback = jest.genMockFunction()
+  var callback = jest.fn(() => {})
   var promoCharitiesResult = <PromoCharitiesResult result={result} onSelect={callback} />
   var component = TestUtils.renderIntoDocument(promoCharitiesResult)
   var link = findByClass(component, 'PromoCharitiesResult__link')

diff --git a/src/components/charities/PromoCharitiesResults/__tests__/PromoCharitiesResults-test.js b/src/components/charities/PromoCharitiesResults/__tests__/PromoCharitiesResults-test.js
@@ -7,7 +7,7 @@ var findByClass = TestUtils.findRenderedDOMComponentWithClass
 var scryByClass = TestUtils.scryRenderedDOMComponentsWithClass
 
 describe('PromoCharitiesResults', function () {
-  var mockFunction = jest.genMockFunction()
+  var mockFunction = jest.fn(() => {})
   var contents = [
     {
       category: 'test tab 1',

diff --git a/src/components/forms/Input/__tests__/Input-test.js b/src/components/forms/Input/__tests__/Input-test.js
@@ -48,10 +48,10 @@ describe('Input', function () {
   })
 
   it('will not execute methods when disabled', function () {
-    var modal = jest.genMockFunction()
-    var output = jest.genMockFunction()
-    var mask = jest.genMockFunction()
-    var validate = jest.genMockFunction()
+    var modal = jest.fn(() => {})
+    var output = jest.fn(() => {})
+    var mask = jest.fn(() => {})
+    var validate = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Input value='oldValue' disabled modal={modal} mask={mask} output={output} validate={validate} />)
     var input = findByClass(element, 'Input__input')
     TestUtils.Simulate.focus(input)
@@ -65,7 +65,7 @@ describe('Input', function () {
   })
 
   it('will execute modal function on focus', function () {
-    var modal = jest.genMockFunction()
+    var modal = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Input value='testValue' modal={modal} />)
     var input = findByClass(element, 'Input__input')
     TestUtils.Simulate.focus(input)
@@ -78,15 +78,15 @@ describe('Input', function () {
   })
 
   it('will execute output function on change', function () {
-    var output = jest.genMockFunction()
+    var output = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Input value='oldValue' output={output} />)
     var input = findByClass(element, 'Input__input')
     TestUtils.Simulate.change(input, { target: { value: 'newValue' } })
     expect(output).lastCalledWith('newValue')
   })
 
   it('will execute mask function on change', function () {
-    var mask = jest.genMockFunction().mockReturnValue('newValue--masked')
+    var mask = jest.fn(() => {}).mockReturnValue('newValue--masked')
     var element = TestUtils.renderIntoDocument(<Input value='oldValue' mask={mask} />)
     var input = findByClass(element, 'Input__input')
     TestUtils.Simulate.change(input, { target: { value: 'newValue' } })
@@ -95,8 +95,8 @@ describe('Input', function () {
   })
 
   it('will execute validate function, but not set state as invalid on blur if not required', function () {
-    var validate = jest.genMockFunction()
-    var setValid = jest.genMockFunction()
+    var validate = jest.fn(() => {})
+    var setValid = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Input required={false} validate={validate} />)
     element.setValid = setValid
     var input = findByClass(element, 'Input__input')
@@ -106,7 +106,7 @@ describe('Input', function () {
   })
 
   it('will execute validate function on blur if required', function () {
-    var validate = jest.genMockFunction()
+    var validate = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Input required validate={validate} />)
     var input = findByClass(element, 'Input__input')
     TestUtils.Simulate.change(input, { target: { value: 'testValue' } })
@@ -120,7 +120,7 @@ describe('Input', function () {
   })
 
   it('will execute validate function on load if has value', function () {
-    var validate = jest.genMockFunction()
+    var validate = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Input required value='testValue' validate={validate} />)
     expect(validate).lastCalledWith('testValue', element.setValid)
     var setValidCallback = validate.mock.calls[0][1]

diff --git a/src/components/forms/Select/__tests__/Select_test.js b/src/components/forms/Select/__tests__/Select_test.js
@@ -41,7 +41,7 @@ describe('Select', function () {
   })
 
   it('will not execute methods when disabled', function () {
-    var output = jest.genMockFunction()
+    var output = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Select value='oldValue' disabled output={output} options={options} />)
     var selectInput = findByClass(element, 'Input__input')
     TestUtils.Simulate.focus(selectInput)
@@ -52,7 +52,7 @@ describe('Select', function () {
   })
 
   it('will execute output function on option selected', function () {
-    var output = jest.genMockFunction()
+    var output = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(<Select options={options} output={output} />)
     var selectInput = findByClass(element, 'Input__input')
     TestUtils.Simulate.change(selectInput, { target: { value: 'option3' } })

diff --git a/...onents/leaderboards/FitnessLeaderboardColHead/__tests__/FitnessLeaderboardColHead-test.js b/...onents/leaderboards/FitnessLeaderboardColHead/__tests__/FitnessLeaderboardColHead-test.js
@@ -23,7 +23,7 @@ class TestWrapper extends React.Component {
 describe('FitnessLeaderboardColHead', function () {
   describe('Default behaviour', function () {
     it('calls a function onclick', function () {
-      var callback = jest.genMockFunction()
+      var callback = jest.fn(() => {})
       var component = TestUtils.renderIntoDocument(
         <TestWrapper
           onClick={callback}

diff --git a/src/components/leaderboards/LeaderboardEmpty/__tests__/LeaderboardEmpty-test.js b/src/components/leaderboards/LeaderboardEmpty/__tests__/LeaderboardEmpty-test.js
@@ -14,7 +14,7 @@ var mockCampaignResponse = {
 
 describe('Generating a get started URL', function () {
   beforeEach(function () {
-    campaigns.find = jest.genMockFunction().mockImplementation(function (id, callback) {
+    campaigns.find = jest.fn(() => {}).mockImplementation(function (id, callback) {
       callback(mockCampaignResponse)
     })
   })

diff --git a/src/components/leaderboards/LeaderboardPaging/__tests__/LeaderboardPaging-test.js b/src/components/leaderboards/LeaderboardPaging/__tests__/LeaderboardPaging-test.js
@@ -9,7 +9,7 @@ describe('LeaderboardPaging', function () {
   describe('component defaults', function () {
     let leaderboardPaging
     let component
-    let callback = jest.genMockFunction()
+    let callback = jest.fn(() => {})
 
     beforeEach(function () {
       leaderboardPaging = <LeaderboardPaging nextPage={callback} prevPage={callback} currentPage={1} pageCount={4} />

diff --git a/...components/leaderboards/LeaderboardPagingButton/__tests__/LeaderboardPagingButton-test.js b/...components/leaderboards/LeaderboardPagingButton/__tests__/LeaderboardPagingButton-test.js
@@ -9,7 +9,7 @@ var findByClass = TestUtils.findRenderedDOMComponentWithClass
 describe('LeaderboardPagingButton', function () {
   var leaderboardPagingButton
   var component
-  var callback = jest.genMockFunction()
+  var callback = jest.fn(() => {})
 
   var prevActiveClass = 'LeaderboardPagingButton__prev--active'
   var nextActiveClass = 'LeaderboardPagingButton__next--active'

diff --git a/src/components/search/AggregateSearchModal/__tests__/AggregateSearchModal-test.js b/src/components/search/AggregateSearchModal/__tests__/AggregateSearchModal-test.js
@@ -47,7 +47,7 @@ describe('AggregateSearchModal', function () {
 
 describe('Selecting results', function () {
   it('renders selectable results', function () {
-    var onSelect = jest.genMockFunction()
+    var onSelect = jest.fn(() => {})
     var element = TestUtils.renderIntoDocument(
       <AggregateSearchModal
         autoFocus={false}
@@ -98,8 +98,8 @@ describe('AggregateSearchModal with searchType prop set', function () {
 
 describe('AggregateSearchModal with custom onSelect function prop', function () {
   it('will call the provided custom function and close the modal', function () {
-    var mockSelect = jest.genMockFunction()
-    var mockClose = jest.genMockFunction()
+    var mockSelect = jest.fn(() => {})
+    var mockClose = jest.fn(() => {})
     searchModal = <AggregateSearchModal autoFocus={false} onSelect={mockSelect} onClose={mockClose} />
     var component = TestUtils.renderIntoDocument(searchModal)
 

diff --git a/src/components/search/AggregateSearchResult/__tests__/AggregateSearchResult-test.js b/src/components/search/AggregateSearchResult/__tests__/AggregateSearchResult-test.js
@@ -17,7 +17,7 @@ describe('AggregateSearchResult', function () {
   })
 
   it('calls onSelect on click', function () {
-    var callback = jest.genMockFunction()
+    var callback = jest.fn(() => {})
     var searchResult = <Result result={result} onSelect={callback} />
     var component = TestUtils.renderIntoDocument(searchResult)
     var element = findByClass(component, 'AggregateSearchResult')

diff --git a/src/components/search/CharitySearchModal/__tests__/CharitySearchModal-test.js b/src/components/search/CharitySearchModal/__tests__/CharitySearchModal-test.js
@@ -1,7 +1,7 @@
 jest.disableAutomock()
 jest.mock('../../../../api/charities')
 
-jest.useFakeTimers()
+jest.useFakeTimers('modern')
 
 import charities from '../../../../api/charities'
 const donateUrl = 'http://donate.url/'
@@ -145,7 +145,7 @@ describe('CharitySearchModal', function () {
   })
 
   it('links to charity url for default visit action', function () {
-    let onClose = jest.genMockFunction()
+    let onClose = jest.fn(() => {})
     let charitySearchModal = <CharitySearchModal autoFocus={false} onClose={onClose} />
     let element = TestUtils.renderIntoDocument(charitySearchModal)
     element.setState({ results: [charity] })
@@ -156,7 +156,7 @@ describe('CharitySearchModal', function () {
   })
 
   it('links to fundraise url for fundraise action', function () {
-    let onClose = jest.genMockFunction()
+    let onClose = jest.fn(() => {})
     let charitySearchModal = <CharitySearchModal autoFocus={false} action='fundraise' onClose={onClose} />
     let element = TestUtils.renderIntoDocument(charitySearchModal)
     element.setState({ results: [charity] })
@@ -168,7 +168,7 @@ describe('CharitySearchModal', function () {
   })
 
   it('links to donate url for donate action', function () {
-    let onClose = jest.genMockFunction()
+    let onClose = jest.fn(() => {})
     let charitySearchModal = <CharitySearchModal autoFocus={false} action='donate' onClose={onClose} />
     let element = TestUtils.renderIntoDocument(charitySearchModal)
     element.setState({ results: [charity] })
@@ -180,8 +180,8 @@ describe('CharitySearchModal', function () {
   })
 
   it('calls custom onSelect callback on charity select', function () {
-    let onClose = jest.genMockFunction()
-    let callback = jest.genMockFunction()
+    let onClose = jest.fn(() => {})
+    let callback = jest.fn(() => {})
     let charitySearchModal = <CharitySearchModal autoFocus={false} action='custom' onClose={onClose} onSelect={callback} />
     let element = TestUtils.renderIntoDocument(charitySearchModal)
     element.setState({ results: [charity] })
@@ -193,8 +193,8 @@ describe('CharitySearchModal', function () {
   })
 
   it('calls onClose on charity select when onSelect callback given', function () {
-    let onClose = jest.genMockFunction()
-    let callback = jest.genMockFunction()
+    let onClose = jest.fn(() => {})
+    let callback = jest.fn(() => {})
     let charitySearchModal = <CharitySearchModal autoFocus={false} action='custom' onClose={onClose} onSelect={callback} />
     let element = TestUtils.renderIntoDocument(charitySearchModal)
     element.setState({ results: [charity] })

diff --git a/src/components/search/CharitySearchModalCustom/__tests__/CharitySearchModal-test.js b/src/components/search/CharitySearchModalCustom/__tests__/CharitySearchModal-test.js
@@ -1,7 +1,7 @@
 jest.disableAutomock()
 jest.mock('../../../../api/frolCharities')
 
-jest.useFakeTimers()
+jest.useFakeTimers('modern')
 
 import charities from '../../../../api/frolCharities'
 
@@ -105,7 +105,7 @@ describe('CharitySearchModal', function () {
   })
 
   it('links to charity url for default visit action', function () {
-    let onClose = jest.genMockFunction()
+    let onClose = jest.fn(() => {})
     let charitySearchModal = <CharitySearchModal autoFocus={false} onClose={onClose} />
     let element = TestUtils.renderIntoDocument(charitySearchModal)
     element.setState({ results: [charity] })

diff --git a/src/components/search/PageSearchModal/__tests__/PageSearchModal-test.js b/src/components/search/PageSearchModal/__tests__/PageSearchModal-test.js
@@ -1,7 +1,7 @@
 jest.disableAutomock()
 jest.mock('../../../../api/pages')
 
-jest.useFakeTimers()
+jest.useFakeTimers('modern')
 
 import pages from '../../../../api/pages'
 import React from 'react'
@@ -219,8 +219,8 @@ describe('Searching', function () {
   })
 
   it('allows custom callback on page select', function () {
-    const onClose = jest.genMockFunction()
-    const callback = jest.genMockFunction()
+    const onClose = jest.fn(() => {})
+    const callback = jest.fn(() => {})
     const pageSearchModal = (
       <PageSearchModal
         autoFocus={false}
@@ -238,8 +238,8 @@ describe('Searching', function () {
   })
 
   it('calls onClose on page select', function () {
-    const onClose = jest.genMockFunction()
-    const callback = jest.genMockFunction()
+    const onClose = jest.fn(() => {})
+    const callback = jest.fn(() => {})
     const pageSearchModal = (
       <PageSearchModal
         autoFocus={false}