Upgrade to react-scripts v4, see if it fixes

.eslintrc.json

@@ -5,12 +5,14 @@
     "react",
     "react-hooks",
     "testing-library",
+    "jest",
     "jest-dom",
     "@typescript-eslint"
   ],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
+    "plugin:jest/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking"
   ],

README.md

@@ -358,12 +358,13 @@ There are open issues in the microsoft vscode repository that block the ability
     "test",
     "--runInBand",
     "--no-cache",
-    "--env=jsdom-fourteen",
+    "--env=jsdom",
     "--transformIgnorePatterns",
     // https://github.com/microsoft/vscode/issues/81944
     "node_modules/(?!(lodash-es|jest*)/)",
     "--setupFiles",
-    "./src/setupTests.js"
+    "./src/setupTests.js",
+    "--resetMocks=false"
   ],
   "cwd": "${workspaceRoot}",
   "protocol": "inspector",

package.json

@@ -66,7 +66,7 @@
     "react-query": "^3.9.8",
     "react-reflex": "^4.0.0",
     "react-router-dom": "5.1.2",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.3",
     "react-sizeme": "^2.6.12",
     "react-spinners": "^0.9.0",
     "react-switch": "^5.0.1",
@@ -136,7 +136,7 @@
     "core-js": "^3.1.4",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "6.6.0",
+    "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-jest-dom": "^3.6.5",
     "eslint-plugin-react": "latest",
     "eslint-plugin-react-hooks": "^2.5.0",
@@ -180,7 +180,7 @@
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css serve:docs",
     "start-deprecated-demo": "npm-run-all -p watch-css start-js",
-    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(lodash-es|jest*)/)\" , --env=jsdom-fourteen --setupFiles ./src/setupTests.js",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(lodash-es|jest*)/)\" , --env=jsdom --setupFiles ./src/setupTests.js --resetMocks false",
     "test:coverage": "yarn test --coverage",
     "test:noPrompt": "CI=true yarn test",
     "eject": "react-scripts eject",
@@ -203,8 +203,7 @@
     "@types/react": "16.9.34",
     "@types/react-tooltip": "^3.11.0",
     "**/@typescript-eslint/eslint-plugin": "^4.1.1",
-    "**/@typescript-eslint/parser": "^4.1.1",
-    "eslint": "6.6.0"
+    "**/@typescript-eslint/parser": "^4.1.1"
   },
   "browserslist": {
     "production": [

src/__tests__/lib/containers/EntityIdList.test.tsx

@@ -3,36 +3,39 @@ import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
 import EntityIdList, {
   EntityIdListProps,
 } from '../../../lib/containers/EntityIdList'
-import { mount } from 'enzyme'
 import { act } from 'react-dom/test-utils'
-import { SynapseTestContext } from '../../../mocks/MockSynapseContext'
+import {
+  MOCK_CONTEXT_VALUE,
+  SynapseTestContext,
+} from '../../../mocks/MockSynapseContext'
+import { render, screen, waitFor } from '@testing-library/react'
+import { mockFileEntityHeader } from '../../../mocks/entity/mockEntity'
+import { getEntityHeadersByIds } from '../../../lib/utils/SynapseClient'
+
+const SynapseClient = require('../../../lib/utils/SynapseClient')
+
+SynapseClient.getEntityHeadersByIds = jest
+  .fn()
+  .mockResolvedValue({ results: [mockFileEntityHeader] })
 
 describe('EntityIdList: basic functionality', () => {
   const props: EntityIdListProps = {
     entityIdList: ['syn123', 'syn345'],
   }
 
-  it('render direct download component without crashing', async () => {
-    const wrapper = mount(<EntityIdList {...props} />, {
-      wrappingComponent: SynapseTestContext,
+  it('renders and retrieves data without crashing', async () => {
+    render(<EntityIdList {...props} />, {
+      wrapper: SynapseTestContext,
     })
-    mockAllIsIntersecting(true)
-    expect(wrapper).toBeDefined()
-  })
-
-  it('test', async () => {
-    const setEntityNameList = jest.fn()
-    const handleStateChange = jest.spyOn(React, 'useState')
-    handleStateChange.mockImplementation(entityNameList => [
-      entityNameList,
-      setEntityNameList,
-    ])
     act(() => {
-      mount(<EntityIdList {...props} />, {
-        wrappingComponent: SynapseTestContext,
-      })
       mockAllIsIntersecting(true)
     })
-    expect(handleStateChange).toBeCalled()
+    await waitFor(() =>
+      expect(getEntityHeadersByIds).toBeCalledWith(
+        props.entityIdList,
+        MOCK_CONTEXT_VALUE.accessToken,
+      ),
+    )
+    screen.getByText(mockFileEntityHeader.name)
   })
 })

src/__tests__/lib/containers/download_list/DownloadListTable.test.tsx

@@ -10,28 +10,19 @@ import {
   FileHandleAssociateType,
   PaginatedResults,
 } from '../../../../lib/utils/synapseTypes/'
-import * as React from 'react'
-import ReactDOM from 'react-dom'
-import { act } from 'react-dom/test-utils'
+import React from 'react'
+import { mount } from 'enzyme'
 import {
   MOCK_CONTEXT_VALUE,
   SynapseTestContext,
 } from '../../../../mocks/MockSynapseContext'
+import { resolveAllPending } from '../../../../lib/testutils/EnzymeHelpers'
 
 describe('it performs all functionality ', () => {
-  let container: HTMLDivElement
   beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
     jest.clearAllMocks()
   })
 
-  afterEach(() => {
-    document.body.removeChild(container!)
-    // @ts-ignore
-    container = null
-  })
-
   const SynapseClient = require('../../../../lib/utils/SynapseClient')
   const fileOneId = '1'
   const fileTwoId = '2'
@@ -108,58 +99,41 @@ describe('it performs all functionality ', () => {
   SynapseClient.deleteDownloadList = mockClearDownloadListFn
 
   const props: DownloadListTableProps = {}
-  it('renders without crashing', async () => {
-    await act(async () => {
-      ReactDOM.render(
-        <SynapseTestContext>
-          <DownloadListTable {...props} />
-        </SynapseTestContext>,
-        container,
-      )
+
+  async function mountComponent() {
+    const wrapper = mount(<DownloadListTable {...props} />, {
+      wrappingComponent: SynapseTestContext,
     })
-    const wrapper = container.querySelector<HTMLDivElement>('div')
+
+    await resolveAllPending(wrapper)
+    return wrapper
+  }
+
+  it('renders without crashing', async () => {
+    const wrapper = await mountComponent()
     expect(wrapper).toBeDefined()
   })
   it('renders each row correctly', async () => {
-    await act(async () => {
-      ReactDOM.render(
-        <SynapseTestContext>
-          <DownloadListTable {...props} />
-        </SynapseTestContext>,
-        container,
-      )
-    })
-    const rows = container.querySelectorAll<HTMLTableRowElement>('tbody tr')
+    const wrapper = await mountComponent()
+    const rows = wrapper.find('tbody tr')
     expect(rows).toHaveLength(2)
-    expect(
-      rows.item(0).querySelector<HTMLAnchorElement>('td a')!.innerHTML,
-    ).toEqual(fileOneName)
-    expect(
-      rows.item(1).querySelector<HTMLAnchorElement>('td a')!.innerHTML,
-    ).toEqual(fileTwoName)
+    expect(rows.find('td a').at(0).text()).toEqual(fileOneName)
+    expect(rows.find('td a').at(1).text()).toEqual(fileTwoName)
     expect(mockGetDownloadListFn).toHaveBeenCalledTimes(1)
     expect(mockGetEntityHeadersFn).toHaveBeenCalledTimes(1)
     expect(mockGetFilesFn).toHaveBeenCalledTimes(1)
   })
   it('deletes a specific row', async () => {
-    await act(async () => {
-      ReactDOM.render(
-        <SynapseTestContext>
-          <DownloadListTable {...props} />
-        </SynapseTestContext>,
-        container,
-      )
-    })
+    const wrapper = await mountComponent()
     mockGetDownloadListFn.mockClear()
     mockGetEntityHeadersFn.mockClear()
     mockGetFilesFn.mockClear()
-    const trashBtn = container
-      .querySelectorAll<HTMLTableRowElement>('tbody tr')
-      .item(0)
-      .querySelector<HTMLButtonElement>(`.${TESTING_TRASH_BTN_CLASS}`)!
-    await act(async () => {
-      trashBtn.click()
-    })
+    wrapper
+      .find('tbody tr')
+      .at(0)
+      .find(`.${TESTING_TRASH_BTN_CLASS}`)
+      .simulate('click')
+    await resolveAllPending(wrapper)
     expect(mockDeleteDownloadListFn).toHaveBeenCalledWith(
       expect.arrayContaining([
         expect.objectContaining({
@@ -173,22 +147,13 @@ describe('it performs all functionality ', () => {
     expect(mockGetFilesFn).not.toHaveBeenCalled()
   })
   it('Clears all rows', async () => {
-    await act(async () => {
-      ReactDOM.render(
-        <SynapseTestContext>
-          <DownloadListTable {...props} />
-        </SynapseTestContext>,
-        container,
-      )
-    })
+    const wrapper = await mountComponent()
+
     mockGetDownloadListFn.mockClear()
     mockGetEntityHeadersFn.mockClear()
     mockGetFilesFn.mockClear()
-    await act(async () => {
-      container
-        .querySelector<HTMLButtonElement>(`#${TESTING_CLEAR_BTN_CLASS}`)!
-        .click()
-    })
+    wrapper.find(`#${TESTING_CLEAR_BTN_CLASS}`).simulate('click')
+    await resolveAllPending(wrapper)
     expect(mockGetDownloadListFn).not.toHaveBeenCalled()
     expect(mockGetEntityHeadersFn).not.toHaveBeenCalled()
     expect(mockGetFilesFn).not.toHaveBeenCalled()

src/__tests__/lib/containers/synapse_form_wrapper/SynapseForm.test.tsx

@@ -111,7 +111,7 @@ describe('action tests', () => {
     await instance.performAction(NavActionEnum.NEXT, false)
 
     expect(getNextStepFn).toHaveBeenCalledWith(
-      jasmine.objectContaining({ id: oldStepId }),
+      expect.objectContaining({ id: oldStepId }),
       instance.state.formData,
       undefined,
     )
@@ -136,7 +136,7 @@ describe('action tests', () => {
     await instance.performAction(NavActionEnum.GO_TO_STEP, false)
 
     expect(getNextStepFn).toHaveBeenCalledWith(
-      jasmine.objectContaining({ id: oldStepId }),
+      expect.objectContaining({ id: oldStepId }),
       instance.state.formData,
       instance.state.steps[3].id,
     )

src/__tests__/lib/containers/widgets/facet-nav/FacetNav.test.tsx

@@ -12,7 +12,6 @@ import testData from '../../../../../mocks/mockQueryResponseDataWithManyEnumFace
 import { SynapseConstants } from '../../../../../lib'
 import userEvent from '@testing-library/user-event'
 import { SynapseTestContext } from '../../../../../mocks/MockSynapseContext'
-import { server } from '../../../../../mocks/msw/server'
 
 const lastQueryRequest: QueryBundleRequest = {
   concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
@@ -61,23 +60,12 @@ function getButtonOnFacet(
 
 function init(overrides?: FacetNavProps) {
   const props = createTestProps(overrides)
-  render(
-    <SynapseTestContext>
-      <FacetNav {...props} />
-    </SynapseTestContext>,
-  )
-  waitFor(() => expect(mockGetLastQueryRequest).toBeCalled())
+  render(<FacetNav {...props} />, {
+    wrapper: SynapseTestContext,
+  })
 }
 
 describe('facets display hide/show', () => {
-  beforeAll(() => {
-    server.listen()
-  })
-
-  afterAll(() => {
-    server.close()
-  })
-
   it("should display 2 facets with 'show more' button", async () => {
     init()
     expect(screen.getAllByRole('graphics-document').length).toBe(2)
@@ -87,18 +75,19 @@ describe('facets display hide/show', () => {
   it('shows all facet plots when show more is clicked', async () => {
     init()
 
-    const showMoreButton = screen.getByText('View All Charts')
-    userEvent.click(showMoreButton!)
+    const showMoreButton = screen.getByRole('button', {
+      name: 'View All Charts',
+    })
+
+    userEvent.click(showMoreButton)
 
     const expectedLength = defaultProps.data?.facets?.filter(
       facet => facet.facetType === 'enumeration',
     ).length
 
-    await waitFor(() => {
-      expect(screen.getAllByRole('graphics-document').length).toBe(
-        expectedLength,
-      )
-    })
+    expect((await screen.findAllByRole('graphics-document')).length).toBe(
+      expectedLength,
+    )
 
     expect(() => screen.getByText('View All Charts')).toThrowError()
   })