Remove mountWithStore enzyme component wrapper (#9309)

* Remove mountWithStore enzyme component wrapper in favor for renderWithProvider testing-library/react for tests

Change dropdown component tests to testing-library/react

test/lib/render-helpers.js

@@ -6,13 +6,6 @@ import { MemoryRouter } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { LegacyI18nProvider } from '../../ui/app/contexts/i18n'
 
-export function mountWithStore (component, store) {
-  const context = {
-    store,
-  }
-  return mount(component, { context })
-}
-
 export function mountWithRouter (component, store = {}, pathname = '/') {
 
   // Instantiate router context

test/unit/responsive/components/dropdown-test.js

@@ -1,26 +1,21 @@
 import assert from 'assert'
 import React from 'react'
 import configureMockStore from 'redux-mock-store'
-import thunk from 'redux-thunk'
+import { fireEvent } from '@testing-library/react'
 import sinon from 'sinon'
-import { mountWithStore } from '../../../lib/render-helpers'
+import { renderWithProvider } from '../../../lib/render-helpers'
 import { Dropdown } from '../../../../ui/app/components/app/dropdowns/components/dropdown'
 
-const mockState = {
-  metamask: {
-  },
-}
-
 describe('Dropdown components', function () {
-  let onClickOutside
-  let onClick
 
-  const createMockStore = configureMockStore([thunk])
+  const mockState = {
+    metamask: {},
+  }
 
-  const dropdownComponentProps = {
+  const props = {
     isOpen: true,
     zIndex: 11,
-    onClickOutside,
+    onClickOutside: sinon.spy(),
     style: {
       position: 'absolute',
       right: 0,
@@ -29,40 +24,22 @@ describe('Dropdown components', function () {
     innerStyle: {},
   }
 
-  let dropdownComponent
-  let store
-  let component
-  beforeEach(function () {
-    onClickOutside = sinon.spy()
-    onClick = sinon.spy()
-
-    store = createMockStore(mockState)
-    component = mountWithStore((
-      <Dropdown {...dropdownComponentProps}>
-        <style>
-          {
-            `
-              .drop-menu-item:hover { background:rgb(235, 235, 235); }
-              .drop-menu-item i { margin: 11px; }
-            `
-          }
-        </style>
-        <li onClick={onClick}>Item 1</li>
-        <li onClick={onClick}>Item 2</li>
-      </Dropdown>
-    ), store)
-    dropdownComponent = component
-  })
-
-  it('can render two items', function () {
-    const items = dropdownComponent.find('li')
-    assert.equal(items.length, 2)
-  })
-
   it('invokes click handler when item clicked', function () {
-    const items = dropdownComponent.find('li')
-    const node = items.at(0)
-    node.simulate('click')
-    assert.ok(onClick.calledOnce)
+    const store = configureMockStore()(mockState)
+
+    const onClickSpy = sinon.spy()
+
+    const { getByText } = renderWithProvider(
+      <Dropdown {...props}>
+        <li onClick={onClickSpy}>Item 1</li>
+        <li onClick={onClickSpy}>Item 2</li>
+      </Dropdown>, store,
+    )
+
+    const item1 = getByText(/Item 1/u)
+    fireEvent.click(item1)
+
+    assert.ok(onClickSpy.calledOnce)
   })
+
 })