From c723b6ef9145a21bcbd18b4e05d31a2423fca4a2 Mon Sep 17 00:00:00 2001
From: Dan Nguyen <45675930+danndz@users.noreply.github.com>
Date: Mon, 10 Feb 2020 20:21:57 +0700
Subject: [PATCH] chore: #130 address warning and error when running test
 (#187)

* chore: #130 address warning and error when running test

* chore: #130 update address warning when running test
---
 package.json                                  | 40 ++++++++---------
 .../components/DatePicker/__tests__/index.tsx | 21 +++++----
 .../components/FileInput/__tests__/index.tsx  | 45 +++++++------------
 .../src/components/FileInput/index.tsx        |  2 +-
 .../src/components/Input/__tests__/index.tsx  | 16 ++++---
 .../src/components/Map/__tests__/index.tsx    |  3 +-
 .../components/SelectBox/__tests__/index.tsx  | 37 +++++++--------
 .../components/TextArea/__tests__/index.tsx   | 16 ++++---
 .../UsePortal/__tests__/portal-provider.tsx   |  6 +--
 .../geo-diary/src/sagas/appointment-detail.ts |  2 +-
 .../geo-diary/src/sagas/next-appointment.ts   |  2 +-
 .../src/sagas/__tests__/checklist-detail.ts   |  2 +
 .../src/sagas/__tests__/submit-checks.ts      |  6 +++
 .../pages/__tests__/developer-submit-app.tsx  | 39 +---------------
 .../src/components/pages/__tests__/help.tsx   |  9 ++--
 .../__tests__/__snapshots__/settings.tsx.snap |  1 +
 .../pages/settings/__tests__/settings.tsx     |  8 ++--
 .../components/pages/settings/settings.tsx    |  2 +-
 .../src/sagas/__tests__/forgot-password.ts    |  6 +++
 .../src/sagas/__tests__/settings.ts           |  8 ++++
 .../src/sagas/__tests__/submit-app.ts         |  4 +-
 packages/marketplace/src/sagas/submit-app.ts  |  2 +-
 scripts/jest/jest-setup.js                    |  8 ++++
 yarn.lock                                     | 18 +++++++-
 24 files changed, 152 insertions(+), 151 deletions(-)

diff --git a/package.json b/package.json
index 56dab12414..d38c373d9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,9 @@
 {
   "name": "root",
   "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "build": "lerna run build:prod --parallel",
     "fetch-config": "yarn config-manager getSecret reapit-marketplace-app-config",
@@ -10,6 +13,22 @@
     "test": "lerna run test:ci --parallel",
     "test-e2e:ci": "lerna run test-e2e:ci --parallel"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && lerna run test:update-badges --since HEAD^ && git add .",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "**/cypress/**/*.{ts,tsx}": [
+      "yarn lint:cypress",
+      "git add"
+    ],
+    "*.{ts,tsx}": [
+      "yarn lint",
+      "git add"
+    ]
+  },
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@sentry/browser": "^5.11.1",
@@ -182,7 +201,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "sw2dts": "^2.6.2",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^25.2.0",
     "ts-loader": "^6.2.1",
     "ts-node": "^8.3.0",
     "ts-paths-to-webpack-alias": "^0.3.1",
@@ -200,24 +219,5 @@
     "yeoman-generator": "^4.0.1",
     "yo": "^3.1.1",
     "yosay": "^2.0.2"
-  },
-  "workspaces": [
-    "packages/*"
-  ],
-  "lint-staged": {
-    "*.{ts,tsx}": [
-      "yarn lint",
-      "git add"
-    ],
-    "**/cypress/**/*.{ts,tsx}": [
-      "yarn lint:cypress",
-      "git add"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged && lerna run test:update-badges --since HEAD^ && git add ."
-    }
   }
 }
diff --git a/packages/elements/src/components/DatePicker/__tests__/index.tsx b/packages/elements/src/components/DatePicker/__tests__/index.tsx
index 76616658d1..42823cb45e 100644
--- a/packages/elements/src/components/DatePicker/__tests__/index.tsx
+++ b/packages/elements/src/components/DatePicker/__tests__/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { shallow, mount } from 'enzyme'
 import { DatePicker, DatePickerProps, CustomInput } from '../index'
 import { Formik, Form } from 'formik'
+import { act } from 'react-dom/test-utils'
 
 jest.unmock('dayjs')
 
@@ -31,7 +32,7 @@ describe('Date-time picker', () => {
     })
   })
 
-  it('should map value correctly from textbox to formik', done => {
+  it('should map value correctly from textbox to formik', async () => {
     const submitCallback = jest.fn()
     const mockEvent = {
       target: {
@@ -49,18 +50,20 @@ describe('Date-time picker', () => {
         }}
       </Formik>,
     )
+
     const input = wrapper.find('input')
-    input.simulate('change', mockEvent)
+
+    await act(async () => {
+      input.simulate('change', mockEvent)
+    })
 
     // onChange
     const form = wrapper.find('form')
-    form.simulate('submit')
-
-    setTimeout(() => {
-      wrapper.update()
-      expect(submitCallback.mock.calls[0][0]).toMatchObject({ test: '1997-11-22T00:00:00' })
-      done()
-    }, 100)
+    await act(async () => {
+      form.simulate('submit')
+    })
+    wrapper.update()
+    expect(submitCallback.mock.calls[0][0]).toMatchObject({ test: '1997-11-22T00:00:00' })
   })
 
   describe('should map value correctly from formik to text box', () => {
diff --git a/packages/elements/src/components/FileInput/__tests__/index.tsx b/packages/elements/src/components/FileInput/__tests__/index.tsx
index bffeb29075..5e733e1ea7 100644
--- a/packages/elements/src/components/FileInput/__tests__/index.tsx
+++ b/packages/elements/src/components/FileInput/__tests__/index.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { shallow, mount } from 'enzyme'
 import { FileInput, FileInputProps } from '../index'
-import { Formik } from 'formik'
+import { Formik, Form } from 'formik'
 import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
 
 const props: FileInputProps = {
   name: 'test',
@@ -32,42 +33,28 @@ describe('FileInput', () => {
     expect(label.text()).toBe('test')
   })
 
-  it('should render error correctly', done => {
-    // setup
-    let waitUntilFormSubmittedResolver: any = null
-
-    let submitForm
-
-    // formik submit function was asynchronous
-    let onSubmit = values => {
-      waitUntilFormSubmittedResolver(values)
-    }
-
+  it('should render error correctly', async () => {
     const Wrapper = () => (
-      <Formik validate={() => ({ test: 'test' })} initialValues={{ test: '' }} onSubmit={onSubmit}>
-        {({ handleSubmit }) => {
-          submitForm = handleSubmit
-
-          // force form vaidate to test
-          return <FileInput id="test" labelText="test" name="test" />
-        }}
+      <Formik validate={() => ({ test: 'test' })} initialValues={{ test: '' }} onSubmit={jest.fn()}>
+        {() => (
+          <Form>
+            <FileInput id="test" labelText="test" name="test" />
+          </Form>
+        )}
       </Formik>
     )
 
-    // trigger upload even
     const wrapper = mount(<Wrapper />)
 
-    submitForm()
+    // onSubmit
+    await act(async () => {
+      wrapper.find('form').simulate('submit', { preventDefault: () => {} })
+    })
 
-    // validate function of is asynchornous and non blocking. use setimeout to push assertion
-    // function into event loop queue
-    setTimeout(() => {
-      wrapper.update()
-      const error = wrapper.find('.has-text-danger')
-      console.log(error.at(0).html())
+    wrapper.update()
 
-      done()
-    }, 1)
+    const error = wrapper.find('.has-text-danger')
+    expect(error).toHaveLength(1)
   })
 
   it('should convert to base64 data correctly', done => {
diff --git a/packages/elements/src/components/FileInput/index.tsx b/packages/elements/src/components/FileInput/index.tsx
index b9a15f0387..2e9ae8b1d7 100644
--- a/packages/elements/src/components/FileInput/index.tsx
+++ b/packages/elements/src/components/FileInput/index.tsx
@@ -33,7 +33,7 @@ export const FileInput = ({
   inputProps,
   required = false,
 }: FileInputProps) => {
-  const [fileUrl, setFileName] = useState()
+  const [fileUrl, setFileName] = useState<string>()
   const inputFile = React.useRef<HTMLInputElement>(null)
 
   return (
diff --git a/packages/elements/src/components/Input/__tests__/index.tsx b/packages/elements/src/components/Input/__tests__/index.tsx
index bfc027dac6..a2c7491c20 100644
--- a/packages/elements/src/components/Input/__tests__/index.tsx
+++ b/packages/elements/src/components/Input/__tests__/index.tsx
@@ -5,6 +5,7 @@ import { Formik, Form } from 'formik'
 import toJson from 'enzyme-to-json'
 import { FaSearch } from 'react-icons/fa'
 import { fieldValidateRequire } from '../../../utils/validators'
+import { act } from 'react-dom/test-utils'
 
 const props: InputProps = {
   id: 'username',
@@ -42,7 +43,7 @@ describe('Input', () => {
     expect(toJson(shallow(<Input {...requiredInputProps} />))).toMatchSnapshot()
   })
 
-  it('should work when integrating with Formik', () => {
+  it('should work when integrating with Formik', async () => {
     const wrapper = mount(
       <Formik initialValues={{ username: '' }} onSubmit={jest.fn()}>
         {() => (
@@ -53,12 +54,15 @@ describe('Input', () => {
       </Formik>,
     )
     expect(wrapper.find('label')).toHaveLength(1)
-    wrapper.find('input').simulate('change', {
-      target: {
-        value: 'abcxyz',
-        name: 'username',
-      },
+    await act(async () => {
+      wrapper.find('input').simulate('change', {
+        target: {
+          value: 'abcxyz',
+          name: 'username',
+        },
+      })
     })
+    wrapper.update()
     expect(wrapper.find('input').prop('value')).toEqual('abcxyz')
   })
 
diff --git a/packages/elements/src/components/Map/__tests__/index.tsx b/packages/elements/src/components/Map/__tests__/index.tsx
index 0486fdb05f..d7fedaf26f 100644
--- a/packages/elements/src/components/Map/__tests__/index.tsx
+++ b/packages/elements/src/components/Map/__tests__/index.tsx
@@ -28,7 +28,6 @@ describe('Map', () => {
   let markerCallBack = jest.fn()
   let mockCurrentLocation: any = null
   let mockBounds: any = null
-  const mockAlert = jest.spyOn(window, 'alert')
   let mockMarker: any = null
   let mockMarkers: any[] = []
   const mockMarkerComponent = () => <div>Test</div>
@@ -113,7 +112,7 @@ describe('Map', () => {
       const mockResponse = {}
       const mockStatus = 'ERROR'
       fn(mockResponse, mockStatus)
-      expect(mockAlert).toBeCalled()
+      expect(window.alert).toBeCalled()
     })
   })
 
diff --git a/packages/elements/src/components/SelectBox/__tests__/index.tsx b/packages/elements/src/components/SelectBox/__tests__/index.tsx
index cd23c695bc..77e813e05c 100644
--- a/packages/elements/src/components/SelectBox/__tests__/index.tsx
+++ b/packages/elements/src/components/SelectBox/__tests__/index.tsx
@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme'
 import { SelectBox, SelectBoxOptions, SelectBoxProps } from '../index'
 import { Formik, Form, FormikErrors } from 'formik'
 import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
 
 const mockedOptions: SelectBoxOptions[] = [
   { label: 'a', value: 'a' },
@@ -66,17 +67,16 @@ describe('SelectBox', () => {
   })
 
   describe('should work when integrating with Formik', () => {
-    it('Render error correctly', done => {
+    it('Render error correctly', async () => {
       const wrapper = mount(<ErrorFomrikComponent />)
       const select = wrapper.find('select')
-      select.simulate('focus')
-      select.simulate('change', { target: { name: 'demo', value: 'b' } })
-      select.simulate('blur', { target: { name: 'demo', value: 'b' } })
-      select.update()
-      setTimeout(() => {
-        expect(wrapper.find('select').props().value).toBe('b')
-        done()
-      }, 100)
+      await act(async () => {
+        select.simulate('change', { target: { name: 'demo', value: 'b' } })
+      })
+
+      wrapper.update()
+
+      expect(wrapper.find('select').props().value).toBe('b')
     })
   })
 
@@ -86,18 +86,19 @@ describe('SelectBox', () => {
     expect(label.text()).toBe('Demo')
   })
 
-  it('Map value correctly from formik', done => {
+  it('Map value correctly from formik', async () => {
     const wrapper = createFormikWrapper()
 
-    wrapper.find('select').simulate('change', {
-      target: {
-        value: 'a',
-      },
+    await act(async () => {
+      wrapper.find('select').simulate('change', {
+        target: {
+          name: 'demo',
+          value: 'a',
+        },
+      })
     })
-    setTimeout(() => {
-      expect(wrapper.find('select').prop('value')).toEqual('a')
-    }, 1)
-    done()
+    wrapper.update()
+    expect(wrapper.find('select').prop('value')).toEqual('a')
   })
 
   afterEach(() => {
diff --git a/packages/elements/src/components/TextArea/__tests__/index.tsx b/packages/elements/src/components/TextArea/__tests__/index.tsx
index c9a9452790..e0c3bf0702 100644
--- a/packages/elements/src/components/TextArea/__tests__/index.tsx
+++ b/packages/elements/src/components/TextArea/__tests__/index.tsx
@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme'
 import { TextArea, TextAreaProps } from '../index'
 import { Formik, Form } from 'formik'
 import toJson from 'enzyme-to-json'
+import { act } from 'react-dom/test-utils'
 
 const props: TextAreaProps = {
   id: 'username',
@@ -15,7 +16,7 @@ describe('Input', () => {
     expect(toJson(shallow(<TextArea {...props} />))).toMatchSnapshot()
   })
 
-  it('should work when integrating with Formik', () => {
+  it('should work when integrating with Formik', async () => {
     const wrapper = mount(
       <Formik initialValues={{ username: '' }} onSubmit={jest.fn()}>
         {() => (
@@ -26,12 +27,15 @@ describe('Input', () => {
       </Formik>,
     )
     expect(wrapper.find('label')).toHaveLength(1)
-    wrapper.find('textarea').simulate('change', {
-      target: {
-        value: 'abcxyz',
-        name: 'username',
-      },
+    await act(async () => {
+      wrapper.find('textarea').simulate('change', {
+        target: {
+          value: 'abcxyz',
+          name: 'username',
+        },
+      })
     })
+    wrapper.update()
     expect(wrapper.find('textarea').prop('value')).toEqual('abcxyz')
   })
 
diff --git a/packages/elements/src/hooks/UsePortal/__tests__/portal-provider.tsx b/packages/elements/src/hooks/UsePortal/__tests__/portal-provider.tsx
index 505ce1f374..a886f847a6 100644
--- a/packages/elements/src/hooks/UsePortal/__tests__/portal-provider.tsx
+++ b/packages/elements/src/hooks/UsePortal/__tests__/portal-provider.tsx
@@ -4,11 +4,7 @@ import { usePortal } from '../use-portal'
 import { PortalProvider } from '../portal-provider'
 
 export const renderWithPortalProvider = ui => {
-  return (
-    <PortalProvider>
-      <body>{ui}</body>
-    </PortalProvider>
-  )
+  return <PortalProvider>{ui}</PortalProvider>
 }
 
 const App: React.FunctionComponent<any> = () => {
diff --git a/packages/geo-diary/src/sagas/appointment-detail.ts b/packages/geo-diary/src/sagas/appointment-detail.ts
index 4fb5a04ca1..afbc5626a8 100644
--- a/packages/geo-diary/src/sagas/appointment-detail.ts
+++ b/packages/geo-diary/src/sagas/appointment-detail.ts
@@ -78,7 +78,7 @@ export const cancelAppointmentRequest = function*() {
       yield put(appointmentsRequestData({ time: filterTime }))
     }
   } catch (error) {
-    console.error(error)
+    console.error(error.message)
     yield put(
       errorThrownServer({
         type: 'SERVER',
diff --git a/packages/geo-diary/src/sagas/next-appointment.ts b/packages/geo-diary/src/sagas/next-appointment.ts
index 3eaeffbec6..3c95d4924a 100644
--- a/packages/geo-diary/src/sagas/next-appointment.ts
+++ b/packages/geo-diary/src/sagas/next-appointment.ts
@@ -101,7 +101,7 @@ export const validateNextAppointment = function*({ data: travelMode }: Action<st
         )
       }
     } catch (err) {
-      console.log(err)
+      console.error(err.message)
       yield put(nextAppointmentClear())
     }
   } else {
diff --git a/packages/lifetime-legal/src/sagas/__tests__/checklist-detail.ts b/packages/lifetime-legal/src/sagas/__tests__/checklist-detail.ts
index 92b55b887a..48c0c1fc8a 100644
--- a/packages/lifetime-legal/src/sagas/__tests__/checklist-detail.ts
+++ b/packages/lifetime-legal/src/sagas/__tests__/checklist-detail.ts
@@ -34,6 +34,8 @@ import ActionTypes from '@/constants/action-types'
 import { selectUserCode } from '@/selectors/auth'
 import { fetchContact, fetchIdentityCheck, updateContact, updateIdentityCheck } from '../api'
 
+jest.mock('../../core/store')
+
 const mockHeaders = {
   Authorization: '123',
 }
diff --git a/packages/lifetime-legal/src/sagas/__tests__/submit-checks.ts b/packages/lifetime-legal/src/sagas/__tests__/submit-checks.ts
index ab2aa94df6..07f36359b7 100644
--- a/packages/lifetime-legal/src/sagas/__tests__/submit-checks.ts
+++ b/packages/lifetime-legal/src/sagas/__tests__/submit-checks.ts
@@ -7,6 +7,12 @@ import { cloneableGenerator } from '@redux-saga/testing-utils'
 import { history } from '@/core/router'
 import routes from '@/constants/routes'
 
+jest.mock('../../core/router.tsx', () => ({
+  history: {
+    push: jest.fn(),
+  },
+}))
+
 describe('submit-check post data', () => {
   const id = 'MKC16000098"'
   const action: Action<string> = {
diff --git a/packages/marketplace/src/components/pages/__tests__/developer-submit-app.tsx b/packages/marketplace/src/components/pages/__tests__/developer-submit-app.tsx
index df878df42a..f22b9c322a 100644
--- a/packages/marketplace/src/components/pages/__tests__/developer-submit-app.tsx
+++ b/packages/marketplace/src/components/pages/__tests__/developer-submit-app.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { match } from 'react-router'
-import { shallow, mount, render } from 'enzyme'
+import { shallow, mount } from 'enzyme'
 import { getMockRouterProps } from '@/utils/mock-helper'
 import {
   SubmitApp,
@@ -54,10 +54,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should show when fetch data loading', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -79,11 +77,9 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     const wrapper = mount(<SubmitApp {...props} />)
     expect(wrapper.find(Loader)).toHaveLength(1)
   })
-
   it('should match submit revision form snapshot', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -115,10 +111,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should match snapshot when there are two app images', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -150,15 +144,12 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
-    const wrapper = render(<SubmitApp {...props} />)
+    const wrapper = shallow(<SubmitApp {...props} />)
     const screenshot1Value = wrapper.find('#screenshot1+span+span>a') // see css selectors
     const screenshot2Value = wrapper.find('#screenshot2+span+span>a') // see css selectors
-
     expect(screenshot1Value).toBeDefined()
     expect(screenshot2Value).toBeDefined()
   })
-
   it('should match submit revision form when appDetailState is loading snapshot', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -190,10 +181,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should match submit revision form when appDetailState is having errors snapshot', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -225,10 +214,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should match submit revision form when appDetailState is having null snapshot', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -260,10 +247,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should match submit app successfully snapshot', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -291,10 +276,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should match submit revision successfully snapshot', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -326,10 +309,8 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     expect(shallow(<SubmitApp {...props} />)).toMatchSnapshot()
   })
-
   it('should show enough scope checkbox', () => {
     const props: SubmitAppProps = {
       ...submitAppMappedActionsProps,
@@ -357,11 +338,9 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     const wrapper = mount(<SubmitApp {...props} />)
     expect(wrapper.find(Checkbox)).toHaveLength(2)
   })
-
   it('should go back to my apps page if click "Back To Apps" when editing an app', () => {
     const mockHistory = mockRouterProps.history
     const props: SubmitAppProps = {
@@ -391,14 +370,12 @@ describe('DeveloperSubmitApp', () => {
       location: mockRouterProps.location,
       categories: appCategorieStub?.data || [],
     }
-
     const wrapper = mount(<SubmitApp {...props} />)
     const goBackButton = wrapper.findWhere(n => n.type() === 'button' && n.text().toLowerCase() === 'back to apps')
     goBackButton.simulate('click')
     expect(props.history.push).toBeCalled()
   })
 })
-
 describe('renderScopesCheckbox run correctly', () => {
   it('when renderScopesCheckBox have scope', () => {
     const scopes = [
@@ -408,32 +385,27 @@ describe('renderScopesCheckbox run correctly', () => {
     const checkboxes = renderScopesCheckbox(scopes)
     expect(checkboxes).toHaveLength(2)
   })
-
   it('when renderScopesCheckBox have scope', () => {
     const scopes = [{ name: 'AgencyCloud/properties.read', description: 'Read data about properties' }]
     const checkboxes = renderScopesCheckbox(scopes)
     expect(checkboxes).toHaveLength(1)
   })
-
   it('when renderScopesCheckBox have no scopes', () => {
     const scopes = undefined
     const checkboxes = renderScopesCheckbox(scopes)
     expect(checkboxes).toHaveLength(0)
   })
-
   it('when renderScopesCheckBox have [] scopes', () => {
     const scopes = []
     const checkboxes = renderScopesCheckbox(scopes)
     expect(checkboxes).toHaveLength(0)
   })
-
   it('when renderScopesCheckBox have null scopes', () => {
     const scopes = []
     const checkboxes = renderScopesCheckbox(scopes)
     expect(checkboxes).toHaveLength(0)
   })
 })
-
 describe('handleSubmitApp', () => {
   const paramsBase = {
     appId: 'appId',
@@ -445,9 +417,7 @@ describe('handleSubmitApp', () => {
   }
   const appModel = {}
   const actions = {} as any
-
   afterEach(() => jest.clearAllMocks())
-
   it('should call setShouldShowError when not agree', () => {
     const params = { ...paramsBase }
     const spy = jest.spyOn(params, 'setShouldShowError')
@@ -455,7 +425,6 @@ describe('handleSubmitApp', () => {
     fn(appModel, actions)
     expect(spy).toHaveBeenCalledWith(true)
   })
-
   it('should call submitApp when dont have appId', () => {
     const params = { ...paramsBase, appId: null, isAgreedTerms: true }
     const spy = jest.spyOn(params, 'submitApp')
@@ -471,7 +440,6 @@ describe('handleSubmitApp', () => {
     expect(spy).toHaveBeenCalledTimes(1)
   })
 })
-
 describe('handleClickOpenModal', () => {
   it('should call preventDefault and setTermModalIsOpen', () => {
     const eventMock = {
@@ -484,7 +452,6 @@ describe('handleClickOpenModal', () => {
     expect(setTermModalIsOpen).toHaveBeenCalledWith(true)
   })
 })
-
 describe('handleCloseModal', () => {
   it('should call setTermModalIsOpen', () => {
     const setTermModalIsOpen = jest.fn()
@@ -492,7 +459,6 @@ describe('handleCloseModal', () => {
     expect(setTermModalIsOpen).toHaveBeenCalledWith(false)
   })
 })
-
 describe('handleAcceptTerms', () => {
   it('should call setIsAgreedTerms and setTermModalIsOpen', () => {
     const setTermModalIsOpen = jest.fn()
@@ -502,7 +468,6 @@ describe('handleAcceptTerms', () => {
     expect(setTermModalIsOpen).toHaveBeenCalledWith(false)
   })
 })
-
 describe('handleDeclineTerms', () => {
   it('should call preventDefault and setTermModalIsOpen', () => {
     const setTermModalIsOpen = jest.fn()
diff --git a/packages/marketplace/src/components/pages/__tests__/help.tsx b/packages/marketplace/src/components/pages/__tests__/help.tsx
index 303d363786..101cd9a3f8 100644
--- a/packages/marketplace/src/components/pages/__tests__/help.tsx
+++ b/packages/marketplace/src/components/pages/__tests__/help.tsx
@@ -44,25 +44,22 @@ describe('handleGotoWelcomeGuide', () => {
 
 describe('handleReportBug', () => {
   it('should called with correct props', () => {
-    const spy = jest.spyOn(window, 'open')
     handleReportBug()
-    expect(spy).toHaveBeenCalledWith(HelpLinks.BUG_REPORT, '_blank')
+    expect(window.open).toHaveBeenCalledWith(HelpLinks.BUG_REPORT, '_blank')
   })
 })
 
 describe('handleRequestEndpoint', () => {
   it('should called with correct props', () => {
-    const spy = jest.spyOn(window, 'open')
     handleRequestEndpoint()
-    expect(spy).toHaveBeenCalledWith(HelpLinks.API_REQUEST, '_blank')
+    expect(window.open).toHaveBeenCalledWith(HelpLinks.API_REQUEST, '_blank')
   })
 })
 
 describe('handleViewRoadmap', () => {
   it('should called with correct props', () => {
-    const spy = jest.spyOn(window, 'open')
     handleViewRoadmap()
-    expect(spy).toHaveBeenCalledWith(HelpLinks.ROADMAP, '_blank')
+    expect(window.open).toHaveBeenCalledWith(HelpLinks.ROADMAP, '_blank')
   })
 })
 
diff --git a/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/settings.tsx.snap b/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/settings.tsx.snap
index d69df75b76..2668d1db07 100644
--- a/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/settings.tsx.snap
+++ b/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/settings.tsx.snap
@@ -45,6 +45,7 @@ exports[`SettingsPage should match snapshot 2`] = `
       <Component>
         <Component>
           <Component
+            dataTest="logout-btn"
             onClick={[MockFunction]}
             type="button"
             variant="primary"
diff --git a/packages/marketplace/src/components/pages/settings/__tests__/settings.tsx b/packages/marketplace/src/components/pages/settings/__tests__/settings.tsx
index 30b3f7573d..00e02b1683 100644
--- a/packages/marketplace/src/components/pages/settings/__tests__/settings.tsx
+++ b/packages/marketplace/src/components/pages/settings/__tests__/settings.tsx
@@ -30,7 +30,7 @@ describe('SettingsPage', () => {
     expect(wrapper).toMatchSnapshot()
   })
 
-  xit('should respond to logout request', () => {
+  it('should respond to logout request', () => {
     const mockProps: SettingsPageProps = {
       email: 'test@gmail.com',
       developerInfo: developerStub,
@@ -41,10 +41,8 @@ describe('SettingsPage', () => {
     }
     const wrapper = shallow(<SettingsPage {...mockProps} />)
 
-    wrapper
-      .find('button')
-      .first()
-      .simulate('click')
+    wrapper.find('[dataTest="logout-btn"]').simulate('click')
+
     expect(mockProps.logout).toHaveBeenCalledTimes(1)
   })
 
diff --git a/packages/marketplace/src/components/pages/settings/settings.tsx b/packages/marketplace/src/components/pages/settings/settings.tsx
index ada6609783..20b7385484 100644
--- a/packages/marketplace/src/components/pages/settings/settings.tsx
+++ b/packages/marketplace/src/components/pages/settings/settings.tsx
@@ -51,7 +51,7 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
           </Grid>
           <FormSection>
             <LevelRight>
-              <Button variant="primary" type="button" onClick={logout}>
+              <Button dataTest="logout-btn" variant="primary" type="button" onClick={logout}>
                 Logout
               </Button>
             </LevelRight>
diff --git a/packages/marketplace/src/sagas/__tests__/forgot-password.ts b/packages/marketplace/src/sagas/__tests__/forgot-password.ts
index beb8a44100..89dca93435 100644
--- a/packages/marketplace/src/sagas/__tests__/forgot-password.ts
+++ b/packages/marketplace/src/sagas/__tests__/forgot-password.ts
@@ -8,7 +8,13 @@ import { history } from '@/core/router'
 import Routes from '@/constants/routes'
 import { resetPassword } from '@reapit/cognito-auth'
 
+jest.mock('@reapit/elements')
 jest.mock('@reapit/cognito-auth')
+jest.mock('../../core/router', () => ({
+  history: {
+    push: jest.fn(),
+  },
+}))
 
 describe('requestForgotPassword', () => {
   process.env.COGNITO_CLIENT_ID_MARKETPLACE = 'cognitoClientId'
diff --git a/packages/marketplace/src/sagas/__tests__/settings.ts b/packages/marketplace/src/sagas/__tests__/settings.ts
index 9244453768..902a664758 100644
--- a/packages/marketplace/src/sagas/__tests__/settings.ts
+++ b/packages/marketplace/src/sagas/__tests__/settings.ts
@@ -25,6 +25,14 @@ import Routes from '@/constants/routes'
 import { authLogoutSuccess } from '@/actions/auth'
 import { showNotificationMessage } from '@/actions/notification-message'
 
+jest.mock('@reapit/elements')
+jest.mock('../../core/router', () => ({
+  history: {
+    push: jest.fn(),
+    replace: jest.fn(),
+  },
+}))
+
 describe('settings', () => {
   describe('developerInformationFetch', () => {
     const gen = cloneableGenerator(developerInformationFetch)()
diff --git a/packages/marketplace/src/sagas/__tests__/submit-app.ts b/packages/marketplace/src/sagas/__tests__/submit-app.ts
index 96f74e48ca..75bbcb5478 100644
--- a/packages/marketplace/src/sagas/__tests__/submit-app.ts
+++ b/packages/marketplace/src/sagas/__tests__/submit-app.ts
@@ -75,7 +75,7 @@ describe('submit-app post data', () => {
   test('api call fail', () => {
     const clone = gen.clone()
     // @ts-ignore
-    expect(clone.throw(new Error('')).value).toEqual(put(submitAppSetFormState('ERROR')))
+    expect(clone.throw(new Error('Call API Failed')).value).toEqual(put(submitAppSetFormState('ERROR')))
     expect(clone.next().value).toEqual(
       put(
         errorThrownServer({
@@ -121,7 +121,7 @@ describe('submit-app fetch data', () => {
   test('api call fail', () => {
     const clone = gen.clone()
     // @ts-ignore
-    expect(clone.throw(new Error('')).value).toEqual(put(submitAppLoading(false)))
+    expect(clone.throw(new Error('Call API Failed')).value).toEqual(put(submitAppLoading(false)))
     expect(clone.next().value).toEqual(
       put(
         errorThrownServer({
diff --git a/packages/marketplace/src/sagas/submit-app.ts b/packages/marketplace/src/sagas/submit-app.ts
index a56a6a3ebf..93acc1dae4 100644
--- a/packages/marketplace/src/sagas/submit-app.ts
+++ b/packages/marketplace/src/sagas/submit-app.ts
@@ -88,7 +88,7 @@ export const submitApp = function*({ data }: Action<SubmitAppArgs>) {
 
     yield put(submitAppSetFormState('SUCCESS'))
   } catch (err) {
-    console.error(err)
+    console.error(err.message)
 
     if (err instanceof FetchError) {
       const response = err.response as any
diff --git a/scripts/jest/jest-setup.js b/scripts/jest/jest-setup.js
index fd331844e5..c966782a53 100644
--- a/scripts/jest/jest-setup.js
+++ b/scripts/jest/jest-setup.js
@@ -435,6 +435,14 @@ Object.defineProperty(window, 'getComputedStyle', {
   }),
 })
 
+Object.defineProperty(window, 'open', {
+  value: jest.fn(),
+})
+
+Object.defineProperty(window, 'alert', {
+  value: jest.fn(),
+})
+
 // browserMock.js
 Object.defineProperty(document, 'currentScript', {
   value: (document.createElement('div').id = 'coordinate-0-0'),
diff --git a/yarn.lock b/yarn.lock
index a846fcee7f..efac7088ec 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21803,7 +21803,7 @@ ts-invariant@^0.4.0, ts-invariant@^0.4.4:
   dependencies:
     tslib "^1.9.3"
 
-ts-jest@^24.0.2, ts-jest@^24.2.0:
+ts-jest@^24.0.2:
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.3.0.tgz#b97814e3eab359ea840a1ac112deae68aa440869"
   integrity sha512-Hb94C/+QRIgjVZlJyiWwouYUF+siNJHJHknyspaOcZ+OQAIdFG/UrdQVXw/0B8Z3No34xkUXZJpOTy9alOWdVQ==
@@ -21819,6 +21819,22 @@ ts-jest@^24.0.2, ts-jest@^24.2.0:
     semver "^5.5"
     yargs-parser "10.x"
 
+ts-jest@^25.2.0:
+  version "25.2.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-25.2.0.tgz#dfd87c2b71ef4867f5a0a44f40cb9c67e02991ac"
+  integrity sha512-VaRdb0da46eorLfuHEFf0G3d+jeREcV+Wb/SvW71S4y9Oe8SHWU+m1WY/3RaMknrBsnvmVH0/rRjT8dkgeffNQ==
+  dependencies:
+    bs-logger "0.x"
+    buffer-from "1.x"
+    fast-json-stable-stringify "2.x"
+    json5 "2.x"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    mkdirp "0.x"
+    resolve "1.x"
+    semver "^5.5"
+    yargs-parser "10.x"
+
 ts-loader@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"