chore: refactor tests for shorthands to use mount() (#4342)

* chore: refactor tests for shorthands to use mount()

* add comment

* fix tests with unmount

Author: layershifter

src/elements/Flag/Flag.js

@@ -530,14 +530,13 @@ Flag.propTypes = {
   name: customPropTypes.suggest(names),
 }
 
-Flag.defaultProps = {
-  as: 'i',
-}
-
 // Heads up!
 // .create() factories should be defined on exported component to be visible as static properties
 const MemoFlag = React.memo(Flag)
 
 MemoFlag.create = createShorthandFactory(MemoFlag, (value) => ({ name: value }))
+MemoFlag.defaultProps = {
+  as: 'i',
+}
 
 export default MemoFlag

src/elements/Icon/Icon.js

@@ -148,15 +148,15 @@ Icon.propTypes = {
   'aria-label': PropTypes.string,
 }
 
-Icon.defaultProps = {
-  as: 'i',
-}
-
 // Heads up!
 // .create() factories should be defined on exported component to be visible as static properties
 const MemoIcon = React.memo(Icon)
 
 MemoIcon.Group = IconGroup
 MemoIcon.create = createShorthandFactory(MemoIcon, (value) => ({ name: value }))
 
+MemoIcon.defaultProps = {
+  as: 'i',
+}
+
 export default MemoIcon

test/specs/addons/Confirm/Confirm-test.js

@@ -34,13 +34,15 @@ describe('Confirm', () => {
     ShorthandComponent: Modal.Header,
     rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
+    requiredProps: { open: true },
   })
   common.implementsShorthandProp(Confirm, {
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: Modal.Content,
     rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
+    requiredProps: { open: true },
   })
 
   describe('children', () => {

test/specs/commonTests/implementsCommonProps.js

@@ -110,6 +110,7 @@ export const implementsHTMLLabelProp = (Component, options = {}) => {
  */
 export const implementsIconProp = (Component, options = {}) => {
   implementsShorthandProp(Component, {
+    assertExactMatch: false,
     propKey: 'icon',
     ShorthandComponent: Icon,
     mapValueToProps: (val) => ({ name: val }),

test/specs/commonTests/implementsShorthandProp.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { createElement } from 'react'
+import React from 'react'
+import ReactIs from 'react-is'
 
 import { createShorthand } from 'src/lib'
 import { consoleUtil, getComponentName } from 'test/utils'
@@ -41,15 +42,28 @@ export default (Component, options = {}) => {
     parentIsFragment = false,
     rendersPortal = false,
     propKey,
-    ShorthandComponent,
     shorthandDefaultProps = {},
     shorthandOverrideProps = {},
     requiredProps = {},
   } = options
   const { assertRequired } = helpers('implementsShorthandProp', Component)
-  const assertMethod = assertExactMatch ? 'contain' : 'containMatchingElement'
+
+  const assertMethod = assertExactMatch ? 'equals' : 'matchesElement'
+  // Heads up!
+  // Enzyme does handle properly React.memo() in find and always returns inner component
+  // That's why we should unwrap it, otherwise "wrapper.find(Component)" is not equal to "Component" 💥
+  const ShorthandComponent =
+    options.ShorthandComponent.$$typeof === ReactIs.Memo
+      ? options.ShorthandComponent.type
+      : options.ShorthandComponent
 
   describe(`${propKey} shorthand prop (common)`, () => {
+    let wrapper
+
+    afterEach(() => {
+      if (wrapper && wrapper.unmount) wrapper.unmount()
+    })
+
     assertRequired(Component, 'a `Component`')
     assertRequired(_.isPlainObject(options), 'an `options` object')
     assertRequired(propKey, 'a `propKey`')
@@ -62,39 +76,44 @@ export default (Component, options = {}) => {
         overrideProps: shorthandOverrideProps,
         autoGenerateKey,
       })
-      const element = createElement(Component, { ...requiredProps, [propKey]: value })
-      const wrapper = shallow(element)
+      wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: value }))
 
-      wrapper.should[assertMethod](expectedShorthandElement)
+      const result = wrapper.find(ShorthandComponent)
+
+      expect(result[assertMethod](expectedShorthandElement)).to.equal(true)
 
       // Enzyme's .key() method is not consistent with React for elements with
       // no key (`undefined` vs `null`), so use the underlying element instead
       // Will fail if more than one element of this type is found
       if (autoGenerateKey) {
-        const shorthandElement = wrapper.find(ShorthandComponent).getElement()
-        expect(shorthandElement.key).to.equal(expectedShorthandElement.key, "key doesn't match")
+        expect(result.getElement().key).to.equal(expectedShorthandElement.key, "key doesn't match")
       }
     }
 
     if (alwaysPresent || (Component.defaultProps && Component.defaultProps[propKey])) {
       it(`has default ${name} when not defined`, () => {
-        shallow(<Component {...requiredProps} />).should.have.descendants(ShorthandComponent)
+        wrapper = mount(React.createElement(Component, requiredProps))
+
+        wrapper.should.have.descendants(ShorthandComponent)
       })
     } else {
       if (!parentIsFragment && !rendersPortal) {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }
 
       it(`has no ${name} when not defined`, () => {
-        shallow(<Component {...requiredProps} />).should.not.have.descendants(ShorthandComponent)
+        wrapper = mount(React.createElement(Component, requiredProps))
+
+        wrapper.should.not.have.descendants(ShorthandComponent)
       })
     }
 
     if (!alwaysPresent) {
       it(`has no ${name} when null`, () => {
-        shallow(
-          createElement(Component, { ...requiredProps, [propKey]: null }),
-        ).should.not.have.descendants(ShorthandComponent)
+        const element = React.createElement(Component, { ...requiredProps, [propKey]: null })
+        wrapper = mount(element)
+
+        wrapper.should.not.have.descendants(ShorthandComponent)
       })
     }
 

test/specs/modules/Dropdown/DropdownItem-test.js

@@ -22,6 +22,7 @@ describe('DropdownItem', () => {
   common.implementsImageProp(DropdownItem, { autoGenerateKey: false })
 
   common.implementsShorthandProp(DropdownItem, {
+    assertExactMatch: false,
     autoGenerateKey: false,
     propKey: 'flag',
     ShorthandComponent: Flag,