From 8592e4a3ce55042dcb095f1b7b8ccd28b9cc0d2c Mon Sep 17 00:00:00 2001 From: Ilya Date: Tue, 22 Jan 2019 20:36:40 +0530 Subject: [PATCH] feat(Popper) react-popper migration v1.3 --- __mocks__/react-popper.js | 17 --- package.json | 2 +- src/Dropdown.js | 11 +- src/DropdownMenu.js | 25 +++- src/DropdownToggle.js | 28 ++-- src/PopperContent.js | 20 ++- src/__tests__/Dropdown.spec.js | 24 ++-- src/__tests__/DropdownMenu.spec.js | 158 ++++++++------------- src/__tests__/DropdownToggle.spec.js | 200 ++++++++++----------------- src/__tests__/PopperContent.spec.js | 20 ++- 10 files changed, 210 insertions(+), 295 deletions(-) delete mode 100644 __mocks__/react-popper.js diff --git a/__mocks__/react-popper.js b/__mocks__/react-popper.js deleted file mode 100644 index 53728460c..000000000 --- a/__mocks__/react-popper.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -export function Manager({ tag: Tag = 'div', ...props }) { - return ; -} - -export function Popper({ component: Tag = 'div', ...props }) { - return ; -} - -export function Arrow({ component: Tag = 'div', ...props }) { - return ; -} - -export function Target({ component: Tag = 'div', ...props }) { - return ; -} diff --git a/package.json b/package.json index 00a8c8ca2..3243ccdf2 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "lodash.tonumber": "^4.0.3", "prop-types": "^15.5.8", "react-lifecycles-compat": "^3.0.4", - "react-popper": "^0.10.4", + "react-popper": "^1.3.2", "react-transition-group": "^2.3.1" }, "peerDependencies": { diff --git a/src/Dropdown.js b/src/Dropdown.js index 459684aed..a90c51e20 100644 --- a/src/Dropdown.js +++ b/src/Dropdown.js @@ -38,7 +38,7 @@ const defaultProps = { }; const childContextTypes = { - toggle: PropTypes.func.isRequired, + toggle: PropTypes.func, isOpen: PropTypes.bool.isRequired, direction: PropTypes.oneOf(['up', 'down', 'left', 'right']).isRequired, inNavbar: PropTypes.bool.isRequired, @@ -206,12 +206,13 @@ class Dropdown extends React.Component { setActiveFromChild, active, addonType, + tag, ...attrs } = omit(this.props, ['toggle', 'disabled', 'inNavbar', 'direction']); const direction = (this.props.direction === 'down' && dropup) ? 'up' : this.props.direction; - attrs.tag = attrs.tag || (nav ? 'li' : 'div'); + const Tag = tag || (nav ? 'li' : 'div'); let subItemIsActive = false; if (setActiveFromChild) { @@ -237,7 +238,11 @@ class Dropdown extends React.Component { } ), cssModule); - return ; + return ( + + + + ); } } diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js index c19d82523..aa4a78534 100644 --- a/src/DropdownMenu.js +++ b/src/DropdownMenu.js @@ -49,16 +49,33 @@ const DropdownMenu = (props, context) => { let Tag = tag; if (persist || (context.isOpen && !context.inNavbar)) { - Tag = Popper; - const position1 = directionPositionMap[context.direction] || 'bottom'; const position2 = right ? 'end' : 'start'; - attrs.placement = `${position1}-${position2}`; + const placement = `${position1}-${position2}`; + attrs.component = tag; - attrs.modifiers = !flip ? { + + const popperModifiers = !flip ? { ...modifiers, ...noFlipModifier, } : modifiers; + + return ( + + {({ ref, style, placement }) => ( + + )} + + ) } return ( diff --git a/src/DropdownToggle.js b/src/DropdownToggle.js index 032bd3d93..eb6438907 100644 --- a/src/DropdownToggle.js +++ b/src/DropdownToggle.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Target } from 'react-popper'; +import { Reference } from 'react-popper'; import { mapToCssModules, tagPropType } from './utils'; import Button from './Button'; @@ -33,7 +33,6 @@ const contextTypes = { class DropdownToggle extends React.Component { constructor(props) { super(props); - this.onClick = this.onClick.bind(this); } @@ -80,6 +79,8 @@ class DropdownToggle extends React.Component { Tag = tag; } + const isStringTag = typeof Tag === 'string'; + if (this.context.inNavbar) { return ( + + {({ ref }) => ( + + )} + ); } } diff --git a/src/PopperContent.js b/src/PopperContent.js index 8d4051990..bc5b36c02 100644 --- a/src/PopperContent.js +++ b/src/PopperContent.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; -import { Arrow, Popper as ReactPopper } from 'react-popper'; +import { Popper as ReactPopper } from 'react-popper'; import { getTarget, targetPropType, mapToCssModules, DOMElement, tagPropType } from './utils'; import Fade from './Fade'; @@ -172,9 +172,21 @@ class PopperContent extends React.Component { onExited={this.onClosed} tag={tag} > - - {children} - {!hideArrow && } + + { + ({ ref, style, placement, arrowProps }) => ( +
+ {children} + {!hideArrow && ( + + )} +
+ ) + } ); diff --git a/src/__tests__/Dropdown.spec.js b/src/__tests__/Dropdown.spec.js index 2b3ef7ff9..18559165c 100644 --- a/src/__tests__/Dropdown.spec.js +++ b/src/__tests__/Dropdown.spec.js @@ -1,6 +1,6 @@ import React from 'react'; import { mount, shallow } from 'enzyme'; -import { Popper, Target } from 'react-popper'; +import { Popper, Reference } from 'react-popper'; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '../'; import { keyCodes } from '../utils'; @@ -975,8 +975,8 @@ describe('Dropdown', () => { ); - expect(wrapper.find('.dropdown-toggle').first().type()).toEqual('a'); - expect(wrapper.find('.dropdown-menu').first().type()).toEqual('div'); + expect(wrapper.childAt(0).find('.dropdown-toggle').first().type()).toEqual('a'); + expect(wrapper.childAt(0).find('.dropdown-menu').first().type()).toEqual('div'); }); it('should open with popper without inNavbar prop', () => { @@ -989,9 +989,9 @@ describe('Dropdown', () => { ); - - expect(wrapper.find('.dropdown-toggle').first().type()).toEqual(Target); - expect(wrapper.find('.dropdown-menu').first().type()).toEqual(Popper); + + expect(wrapper.find(Reference).childAt(0).childAt(0).hasClass('dropdown-toggle')).toEqual(true); + expect(wrapper.find(Popper).childAt(0).childAt(0).hasClass('dropdown-menu')).toEqual(true); }); }); @@ -999,7 +999,7 @@ describe('Dropdown', () => { it('should render an active class', () => { const wrapper = shallow(); - expect(wrapper.hasClass('active')).toBe(true); + expect(wrapper.childAt(0).hasClass('active')).toBe(true); }); it('should render an active class when a child DropdownItem is active IF setActiveFromChild is true', () => { @@ -1016,7 +1016,7 @@ describe('Dropdown', () => { ); - expect(wrapper.hasClass('active')).toBe(true); + expect(wrapper.childAt(0).hasClass('active')).toBe(true); }); }); @@ -1026,9 +1026,9 @@ describe('Dropdown', () => { const dropleft = shallow(); const dropright = shallow(); - expect(dropup.hasClass('dropup')).toBe(true); - expect(dropupProp.hasClass('dropup')).toBe(true); - expect(dropleft.hasClass('dropleft')).toBe(true); - expect(dropright.hasClass('dropright')).toBe(true); + expect(dropup.childAt(0).hasClass('dropup')).toBe(true); + expect(dropupProp.childAt(0).hasClass('dropup')).toBe(true); + expect(dropleft.childAt(0).hasClass('dropleft')).toBe(true); + expect(dropright.childAt(0).hasClass('dropright')).toBe(true); }); }); diff --git a/src/__tests__/DropdownMenu.spec.js b/src/__tests__/DropdownMenu.spec.js index 77e3209d5..0b413121d 100644 --- a/src/__tests__/DropdownMenu.spec.js +++ b/src/__tests__/DropdownMenu.spec.js @@ -1,33 +1,37 @@ import React from 'react'; -import { mount, shallow } from 'enzyme'; -import { Popper } from 'react-popper'; -import { DropdownMenu } from '../'; +import { mount } from 'enzyme'; +import { Manager, Popper } from 'react-popper'; +import { Dropdown, DropdownMenu } from '../'; +import { omit } from './../utils'; -describe('DropdownMenu', () => { - let isOpen; - let direction; - let inNavbar; - let popperManager; - - beforeEach(() => { - isOpen = false; - direction = 'down'; - inNavbar = false; - popperManager = { - getTargetNode: () => ({}), - }; - }); + +class ContextDefineWrapper extends React.Component { + static childContextTypes = Dropdown.childContextTypes; + + getChildContext = () => ({ + isOpen: false, + inNavbar: false, + direction: 'down', + ...omit(this.props, ['children']) + }) + + render = () => {this.props.children} +} + +const mountWithContext = (node, context) => { + return mount( + {node} + ).find(node.type); +}; + +describe('DropdownMenu', () => { it('should render children', () => { - isOpen = true; - const wrapper = mount( + const wrapper = mountWithContext(

Content

, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find('.dropdown-menu').hostNodes().text()).toBe('Content'); @@ -35,15 +39,11 @@ describe('DropdownMenu', () => { }); it('should not have the class "show" when isOpen context is false', () => { - isOpen = false; - const wrapper = mount( + const wrapper = mountWithContext(

Content

, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: false } ); expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('show')).toBe(false); @@ -51,15 +51,11 @@ describe('DropdownMenu', () => { }); it('should have the class "show" when isOpen context is true', () => { - isOpen = true; - const wrapper = mount( + const wrapper = mountWithContext(

Content

, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('show')).toBe(true); @@ -67,144 +63,98 @@ describe('DropdownMenu', () => { }); it('should render left aligned menus by default', () => { - isOpen = true; - const wrapper = mount( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-right')).toBe(false); }); it('should render right aligned menus', () => { - isOpen = true; - const wrapper = mount( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find('.dropdown-menu').hostNodes().hasClass('dropdown-menu-right')).toBe(true); }); it('should render down when direction is unknown on the context', () => { - isOpen = true; - direction = 'unknown'; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true, direction: 'unknown' } ); expect(wrapper.find(Popper).prop('placement')).toBe('bottom-start'); }); it('should render down when direction is "down" on the context', () => { - isOpen = true; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find(Popper).prop('placement')).toBe('bottom-start'); }); it('should render up when direction is "up" on the context', () => { - isOpen = true; - direction = 'up'; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true, direction: 'up' } ); expect(wrapper.find(Popper).prop('placement')).toBe('top-start'); }); it('should render left when direction is "left" on the context', () => { - isOpen = true; - direction = 'left'; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true, direction: 'left' } ); expect(wrapper.find(Popper).prop('placement')).toBe('left-start'); }); it('should render right when direction is "right" on the context', () => { - isOpen = true; - direction = 'right'; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true, direction: 'right' } ); expect(wrapper.find(Popper).prop('placement')).toBe('right-start'); }); it('should not disable flip modifier by default', () => { - isOpen = true; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find(Popper).prop('modifiers')).toBe(undefined); }); it('should disable flip modifier when flip is false', () => { - isOpen = true; - const wrapper = shallow( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: true } ); expect(wrapper.find(Popper).prop('modifiers')).toEqual({ flip: { enabled: false } }); }); it('should not render multiple children when isOpen is false', () => { - const wrapper = mount( + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - } + { isOpen: false } ); - expect(wrapper.childAt(0).children().length).toBe(0); }); it('should render custom tag', () => { - const wrapper = mount(Yo!, - { - context: { isOpen, direction, inNavbar, popperManager }, - childContextTypes: { popperManager } - }); + const wrapper = mountWithContext( + Yo! + ); expect(wrapper.text()).toBe('Yo!'); expect(wrapper.childAt(0).hasClass('dropdown-menu')).toBe(true); diff --git a/src/__tests__/DropdownToggle.spec.js b/src/__tests__/DropdownToggle.spec.js index fbe9973ba..71c8e8cfa 100644 --- a/src/__tests__/DropdownToggle.spec.js +++ b/src/__tests__/DropdownToggle.spec.js @@ -1,56 +1,49 @@ import React from 'react'; import { mount } from 'enzyme'; -import { DropdownToggle } from '../'; +import { Manager } from 'react-popper'; +import { Dropdown, DropdownToggle } from '../'; +import { omit } from './../utils'; + +class ContextDefineWrapper extends React.Component { + static childContextTypes = Dropdown.childContextTypes; + + getChildContext = () => ({ + isOpen: false, + inNavbar: false, + toggle: () => { + this.isOpen = !this.isOpen; + }, + ...omit(this.props, ['children']) + }) + + render = () => {this.props.children} +} + +const mountWithContext = (node, context) => { + return mount( + {node} + ).find(node.type); +}; describe('DropdownToggle', () => { - let isOpen; - let inNavbar; - let popperManager; - let toggle; - - beforeEach(() => { - isOpen = false; - inNavbar = false; - popperManager = { - setTargetNode: () => {} - }; - toggle = () => { - isOpen = !isOpen; - }; - }); - it('should wrap text', () => { - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); expect(wrapper.text()).toBe('Ello world'); }); it('should add default sr-only content', () => { - const wrapper = mount( - , - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } - ); + const wrapper = mountWithContext(); expect(wrapper.text()).toBe('Toggle Dropdown'); expect(wrapper.find('.sr-only').hostNodes().length).toBe(1); }); it('should add default sr-only content', () => { - const wrapper = mount( - , - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + ); expect(wrapper.text()).toBe('Dropup Toggle'); @@ -58,12 +51,8 @@ describe('DropdownToggle', () => { }); it('should render elements', () => { - const wrapper = mount( - Click Me, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Click Me ); expect(wrapper.text()).toBe('Click Me'); @@ -71,64 +60,44 @@ describe('DropdownToggle', () => { }); it('should render a caret', () => { - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); - expect(wrapper.childAt(0).hasClass('dropdown-toggle')).toBe(true); + expect(wrapper.childAt(0).childAt(0).childAt(0).hasClass('dropdown-toggle')).toBe(true); }); describe('color', () => { - it('should render the dropdown as a BUTTON element with default color secondary', () => { - const wrapper = mount( - , - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } - ); - - expect(wrapper.find('button').hostNodes().length).toBe(1); - expect(wrapper.find('button').hostNodes().hasClass('btn-secondary')).toBe(true); + it("should render the dropdown as a BUTTON element with default color secondary", () => { + const wrapper = mountWithContext(); + + expect(wrapper.find("button").hostNodes().length).toBe(1); + expect(wrapper + .find("button") + .hostNodes() + .hasClass("btn-secondary")).toBe(true); }); - it('should render the dropdown as a BUTTON element with explicit color success', () => { - const wrapper = mount( - , - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } - ); + it("should render the dropdown as a BUTTON element with explicit color success", () => { + const wrapper = mountWithContext(); - expect(wrapper.find('button').hostNodes().length).toBe(1); - expect(wrapper.find('button').hostNodes().hasClass('btn-success')).toBe(true); + expect(wrapper.find("button").hostNodes().length).toBe(1); + expect(wrapper + .find("button") + .hostNodes() + .hasClass("btn-success")).toBe(true); }); - it('should render the dropdown as an A element with no color attribute', () => { - const wrapper = mount( - , - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } - ); + it("should render the dropdown as an A element with no color attribute", () => { + const wrapper = mountWithContext(); - expect(wrapper.find('a').hostNodes().length).toBe(1); - expect(wrapper.find('a[color]').hostNodes().length).toBe(0); + expect(wrapper.find("a").hostNodes().length).toBe(1); + expect(wrapper.find("a[color]").hostNodes().length).toBe(0); }); it('should render the dropdown as a DIV element with no color attribute', () => { - const wrapper = mount( - , - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + ); expect(wrapper.find('div').hostNodes().length).toBe(1); @@ -137,26 +106,18 @@ describe('DropdownToggle', () => { }); it('should render a split', () => { - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); - expect(wrapper.childAt(0).hasClass('dropdown-toggle-split')).toBe(true); + expect(wrapper.childAt(0).childAt(0).childAt(0).hasClass('dropdown-toggle-split')).toBe(true); }); describe('onClick', () => { it('should call props.onClick if it exists', () => { const onClick = jest.fn(); - const wrapper = mount( - onClick()}>Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + onClick()}>Ello world ); const instance = wrapper.instance(); @@ -165,13 +126,10 @@ describe('DropdownToggle', () => { }); it('should call context.toggle when present ', () => { - toggle = jest.fn(); - const wrapper = mount( + const toggle = jest.fn(); + const wrapper = mountWithContext( Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + { toggle } ); const instance = wrapper.instance(); @@ -186,12 +144,8 @@ describe('DropdownToggle', () => { describe('disabled', () => { it('should preventDefault when disabled', () => { const e = { preventDefault: jest.fn() }; - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); const instance = wrapper.instance(); @@ -202,12 +156,8 @@ describe('DropdownToggle', () => { describe('nav', () => { it('should add .nav-link class', () => { - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); expect(wrapper.find('a').hostNodes().length).toBe(1); @@ -215,12 +165,8 @@ describe('DropdownToggle', () => { }); it('should not set the tag prop when the tag is defined', () => { - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); expect(wrapper.prop('tag')).toBe(undefined); @@ -228,12 +174,8 @@ describe('DropdownToggle', () => { it('should preventDefault', () => { const e = { preventDefault: jest.fn() }; - const wrapper = mount( - Ello world, - { - context: { isOpen, inNavbar, toggle, popperManager }, - childContextTypes: { popperManager } - } + const wrapper = mountWithContext( + Ello world ); const instance = wrapper.instance(); diff --git a/src/__tests__/PopperContent.spec.js b/src/__tests__/PopperContent.spec.js index 5880e326a..6fdf8dd93 100644 --- a/src/__tests__/PopperContent.spec.js +++ b/src/__tests__/PopperContent.spec.js @@ -1,6 +1,6 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; -import { Arrow, Popper } from 'react-popper'; +import { Popper } from 'react-popper'; import { PopperContent } from '../'; describe('PopperContent', () => { @@ -42,16 +42,15 @@ describe('PopperContent', () => { expect(wrapper.text()).toBe('Yo!'); }); - it('should render an Arrow in the Popper when isOpen is true and container is inline', () => { + it('should render an arrow element in the Popper when isOpen is true and container is inline', () => { const wrapper = mount(Yo!); - - expect(wrapper.containsMatchingElement()).toBe(true); + expect(wrapper.find('.arrow').type()).toBe('span'); }); it('should NOT render an Arrow in the Popper when "hideArrow" is truthy', () => { const wrapper = mount(Yo!); - - expect(wrapper.containsMatchingElement()).toBe(false); + + expect(wrapper.find('.arrow').exists()).toBe(false); }); it('should render with "hideArrow" false by default', () => { @@ -111,26 +110,25 @@ describe('PopperContent', () => { }); it('should have placement class of top by default', () => { - const wrapper = shallow(Yo!); - + const wrapper = mount(Yo!); expect(wrapper.find('.auto').exists()).toBe(true); }); it('should override placement class', () => { - const wrapper = shallow(Yo!); + const wrapper = mount(Yo!); expect(wrapper.find('.auto').exists()).toBe(false); expect(wrapper.find('.top').exists()).toBe(true); }); it('should allow for a placement prefix', () => { - const wrapper = shallow(Yo!); + const wrapper = mount(Yo!); expect(wrapper.find('.dropdown-auto').exists()).toBe(true); }); it('should allow for a placement prefix with custom placement', () => { - const wrapper = shallow(Yo!); + const wrapper = mount(Yo!); expect(wrapper.find('.dropdown-auto').exists()).toBe(false); expect(wrapper.find('.dropdown-top').exists()).toBe(true);