From f6faf4d8c3844f26a4b74f6d7029645f6f712b1e Mon Sep 17 00:00:00 2001
From: Devon Govett <govett@adobe.com>
Date: Thu, 30 Nov 2017 13:39:58 -0800
Subject: [PATCH] [RSP-20] React 16 Upgrade (#85)

* RSP-20:React 16 upgrade

* RSP-20:React 16 upgrade *updating tests(failed)

* RSP-20:React 16 upgrade *updating tests(failed)

* did some updates to libraries

* updated libraries, etc

* package upgrades done for r16. starting test fixing

* fixed autocomplete, start calendar"

* fixed toasts tests..mainly had to call update()0

* fix tablist - mainly disabledlifecyclemethods so we don't call componentDidMount

* testing fixes finished, 584 tests passing

* removed logs

* responded to code review by NR

* added package-lock.json to gitignore

* reverted changes to npmrc..wasn't supposed to be pushed

* remove changes to package.json

* Test cleanup

* Fix storybook styling strangeness

* Fix CalendarCell tests

* Upgrade react-overlays version

Fixes ModalContainer/Portal things for react 16

* Convert Underlay to a class component

Functional components cannot have refs in React 16

* Test against multiple versions of react

* Disable uglifyjs on storybook builds

https://github.com/storybooks/storybook/issues/1570

* Add default enzyme adapter

* Fix for ref race condition error (#86)
---
 packages/react-spectrum/.gitignore            |  2 +
 packages/react-spectrum/.storybook/addons.js  |  4 +-
 packages/react-spectrum/.storybook/config.js  | 17 +++++++-
 .../.storybook/webpack.config.js              | 40 ++++++++++++-------
 packages/react-spectrum/Makefile              | 16 ++++++--
 packages/react-spectrum/package.json          | 36 +++++++++--------
 .../src/Accordion/js/Accordion.js             |  3 +-
 .../src/Accordion/js/AccordionItem.js         |  9 +++--
 .../src/Calendar/js/Calendar.js               |  3 +-
 packages/react-spectrum/src/Clock/js/Clock.js |  3 +-
 .../src/Datepicker/js/Datepicker.js           |  3 +-
 packages/react-spectrum/src/Menu/js/Menu.js   |  3 +-
 .../src/ModalContainer/js/ModalContainer.js   |  7 +++-
 .../src/NumberInput/js/NumberInput.js         |  3 +-
 .../src/OverlayTrigger/js/OverlayTrigger.js   |  3 +-
 .../react-spectrum/src/Popover/js/Popover.js  |  4 +-
 .../react-spectrum/src/Shell/js/ShellMenu.js  | 20 +++++++---
 .../src/TableView/js/TableView.js             |  3 +-
 packages/react-spectrum/stories/Accordion.js  |  2 +-
 packages/react-spectrum/stories/Alert.js      |  2 +-
 .../react-spectrum/stories/Autocomplete.js    |  2 +-
 .../react-spectrum/stories/Breadcrumbs.js     |  2 +-
 packages/react-spectrum/stories/Button.js     |  2 +-
 .../react-spectrum/stories/ButtonGroup.js     |  2 +-
 packages/react-spectrum/stories/Calendar.js   |  2 +-
 packages/react-spectrum/stories/Checkbox.js   |  2 +-
 packages/react-spectrum/stories/Clock.js      |  2 +-
 packages/react-spectrum/stories/ComboBox.js   |  2 +-
 packages/react-spectrum/stories/Datepicker.js |  2 +-
 packages/react-spectrum/stories/Dialog.js     |  2 +-
 packages/react-spectrum/stories/Dropdown.js   |  2 +-
 .../react-spectrum/stories/DropdownButton.js  |  2 +-
 packages/react-spectrum/stories/Grid.js       |  2 +-
 packages/react-spectrum/stories/Heading.js    |  2 +-
 packages/react-spectrum/stories/Icon.js       |  2 +-
 .../react-spectrum/stories/InlineEditor.js    |  2 +-
 packages/react-spectrum/stories/Link.js       |  2 +-
 packages/react-spectrum/stories/List.js       |  2 +-
 .../react-spectrum/stories/ModalTrigger.js    |  2 +-
 .../react-spectrum/stories/NumberInput.js     |  2 +-
 .../react-spectrum/stories/OverlayTrigger.js  |  2 +-
 packages/react-spectrum/stories/Popover.js    |  2 +-
 packages/react-spectrum/stories/Progress.js   |  2 +-
 packages/react-spectrum/stories/Radio.js      |  2 +-
 packages/react-spectrum/stories/RadioGroup.js |  2 +-
 packages/react-spectrum/stories/Rating.js     |  2 +-
 packages/react-spectrum/stories/Search.js     |  2 +-
 packages/react-spectrum/stories/Select.js     |  4 +-
 packages/react-spectrum/stories/SelectList.js |  2 +-
 packages/react-spectrum/stories/Slider.js     |  2 +-
 .../react-spectrum/stories/SplitButton.js     |  2 +-
 packages/react-spectrum/stories/StepList.js   |  2 +-
 packages/react-spectrum/stories/Switch.js     |  2 +-
 packages/react-spectrum/stories/TabList.js    |  2 +-
 packages/react-spectrum/stories/TabView.js    |  2 +-
 packages/react-spectrum/stories/Table.js      |  2 +-
 packages/react-spectrum/stories/TableView.js  |  2 +-
 packages/react-spectrum/stories/Tag.js        |  2 +-
 packages/react-spectrum/stories/TagField.js   |  2 +-
 packages/react-spectrum/stories/TagList.js    |  2 +-
 packages/react-spectrum/stories/Textarea.js   |  2 +-
 packages/react-spectrum/stories/Textfield.js  |  2 +-
 packages/react-spectrum/stories/Toast.js      |  2 +-
 packages/react-spectrum/stories/Tooltip.js    |  2 +-
 packages/react-spectrum/stories/Wait.js       |  2 +-
 packages/react-spectrum/stories/Well.js       |  2 +-
 .../stories/shell/ShellHeader.js              |  2 +-
 .../react-spectrum/stories/shell/ShellHelp.js |  2 +-
 .../stories/shell/ShellOrgSwitcher.js         |  2 +-
 .../stories/shell/ShellSolutionSwitcher.js    |  2 +-
 packages/react-spectrum/test/.setup.js        |  3 ++
 .../test/Accordion/Accordion.js               |  5 ++-
 packages/react-spectrum/test/Alert/Alert.js   |  6 +--
 .../test/Autocomplete/Autocomplete.js         | 37 ++++++++++++-----
 packages/react-spectrum/test/Button/Button.js |  6 +--
 .../react-spectrum/test/Calendar/Calendar.js  | 25 +++++++++---
 .../test/Datepicker/Datepicker.js             | 14 +++----
 packages/react-spectrum/test/Grid/Grid.js     |  2 +-
 .../react-spectrum/test/Grid/GridColumn.js    |  2 +-
 packages/react-spectrum/test/Grid/GridRow.js  |  2 +-
 .../react-spectrum/test/Heading/Heading.js    |  3 +-
 packages/react-spectrum/test/Link/Link.js     |  2 +-
 .../test/OverlayTrigger/Overlay.js            |  2 +-
 .../test/OverlayTrigger/Position.js           | 10 +++--
 .../test/OverlayTrigger/calculatePosition.js  |  1 -
 .../test/PortalContainer/PortalContainer.js   |  6 ++-
 .../react-spectrum/test/Progress/Progress.js  |  4 +-
 packages/react-spectrum/test/Search/Search.js |  4 +-
 .../test/Shell/ShellOrgSwitcher.js            |  1 +
 .../react-spectrum/test/Switch/SwitchBase.js  | 12 +++---
 .../react-spectrum/test/TabList/TabList.js    | 36 ++++++++---------
 packages/react-spectrum/test/Table/TBody.js   |  2 +-
 packages/react-spectrum/test/Table/TD.js      |  2 +-
 packages/react-spectrum/test/Table/TH.js      |  2 +-
 packages/react-spectrum/test/Table/THead.js   |  2 +-
 packages/react-spectrum/test/Table/TR.js      |  2 +-
 packages/react-spectrum/test/Table/Table.js   |  2 +-
 packages/react-spectrum/test/TagList/Tag.js   |  6 +--
 .../react-spectrum/test/TagList/TagList.js    |  2 +-
 .../test/Toast/ToastContainer.js              |  6 +++
 packages/react-spectrum/test/Well/Well.js     |  2 +-
 101 files changed, 300 insertions(+), 196 deletions(-)

diff --git a/packages/react-spectrum/.gitignore b/packages/react-spectrum/.gitignore
index 603e0920..0763494e 100644
--- a/packages/react-spectrum/.gitignore
+++ b/packages/react-spectrum/.gitignore
@@ -7,3 +7,5 @@ test-reports.xml
 .nyc_output
 yarn.lock
 dist
+.idea
+.package-lock.json
diff --git a/packages/react-spectrum/.storybook/addons.js b/packages/react-spectrum/.storybook/addons.js
index 95c1521d..0e29905e 100644
--- a/packages/react-spectrum/.storybook/addons.js
+++ b/packages/react-spectrum/.storybook/addons.js
@@ -1,4 +1,4 @@
 //  To get our default addons (actions and links)
-import '@kadira/storybook/addons';
+import '@storybook/react/addons';
 //  To add the knobs addon
-import '@kadira/storybook-addon-knobs/register';
+import '@storybook/addon-knobs/register';
diff --git a/packages/react-spectrum/.storybook/config.js b/packages/react-spectrum/.storybook/config.js
index c01013a1..d5ab5729 100644
--- a/packages/react-spectrum/.storybook/config.js
+++ b/packages/react-spectrum/.storybook/config.js
@@ -1,6 +1,6 @@
 import 'babel-polyfill';
-import {configure, setAddon} from '@kadira/storybook';
-import infoAddon from '@kadira/react-storybook-addon-info';
+import {configure, setAddon} from '@storybook/react';
+import infoAddon, {setDefaults} from '@storybook/addon-info';
 
 import configureTypekit from '../src/utils/configureTypekit';
 
@@ -9,6 +9,19 @@ import '../src/page';
 
 setAddon(infoAddon);
 
+// addon-info
+setDefaults({
+  inline: true,
+  styles: (s) => {
+    s.infoBody.backgroundColor = 'transparent';
+    s.infoBody.border = 'none';
+    s.infoBody.boxShadow = 'none';
+    s.infoBody.padding = 0;
+    s.infoBody.marginTop = 0;
+    return s;
+  }
+});
+
 function loadStories() {
   var storiesContext = require.context('../stories', true, /^(.*\.(js|jsx))$/);
   storiesContext.keys().forEach(storiesContext);
diff --git a/packages/react-spectrum/.storybook/webpack.config.js b/packages/react-spectrum/.storybook/webpack.config.js
index 175f5866..f2c9b8f2 100644
--- a/packages/react-spectrum/.storybook/webpack.config.js
+++ b/packages/react-spectrum/.storybook/webpack.config.js
@@ -1,9 +1,14 @@
 const path = require('path');
 
 module.exports = (config, env) => {
+  if (env === 'PRODUCTION') {
+    // see https://github.com/storybooks/storybook/issues/1570
+    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
+  }
+
   return Object.assign(config, {
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.jsx?$/,
           include: [__dirname, path.resolve(__dirname + '/../src'), path.resolve(__dirname + '/../stories'), /collection-view/],
@@ -11,12 +16,29 @@ module.exports = (config, env) => {
         },
         {
           test: /\.styl$/,
-          loaders: ['style', 'css', 'stylus'],
+          use: [
+            'style-loader',
+            'css-loader',
+            {
+              loader: 'stylus-loader',
+              options: {
+                paths: [__dirname + '/../node_modules'],
+                define: {
+                  'embedurl': require('stylus').url()
+                },
+                'resolve url': true,
+                set: {
+                  'include css': true
+                },
+                use: [require('svg-stylus')(), require('nib')()]
+              }
+            }
+          ],
           include: path.resolve(__dirname, '../')
         },
         {
           test: /\.css$/,
-          loaders: ['style', 'css'],
+          loaders: ['style-loader', 'css-loader'],
           include: path.resolve(__dirname, '../')
         },
         {
@@ -24,17 +46,7 @@ module.exports = (config, env) => {
           loader: 'url-loader?limit=8192'// limit inlining base64 URLs to <=8k images, direct URLs for the rest
         }
       ]
-    },
-    stylus: {
-      paths: [__dirname + '/../node_modules'],
-      use: [require('svg-stylus')(), require('nib')()],
-      define: {
-        'embedurl': require('stylus').url()
-      },
-      'resolve url': true,
-      set: {
-        'include css': true
-      }
     }
   });
 };
+
diff --git a/packages/react-spectrum/Makefile b/packages/react-spectrum/Makefile
index 5645c78d..3a5ecdae 100644
--- a/packages/react-spectrum/Makefile
+++ b/packages/react-spectrum/Makefile
@@ -2,6 +2,7 @@
 
 SHELL := /bin/bash
 PATH := ./node_modules/.bin:$(PATH)
+REACT := 0.14 15.5 16
 
 all: node_modules
 
@@ -13,21 +14,28 @@ run:
 	start-storybook -p 9002
 
 clean:
-	rm -rf node_modules dist
+	rm -rf node_modules dist storybook-static
 	bash -c 'for f in src/*; do rm -rf $$(basename $$f); done'
 
 lint:
 	lfeslint
 
-test: lint
+test:
 	NODE_ENV=test mocha
 
 cover:
 	NODE_ENV=test BABEL_ENV=cover nyc mocha
 
 jenkins_test: lint
-	NODE_ENV=test BABEL_ENV=cover nyc --reporter cobertura --report-dir . mocha $(MOCHA_OPTS) --reporter mocha-junit-reporter
-	find ./node_modules/ -name coverage.json -exec rm {} \;
+	# Test each version of react
+	@for version in $(REACT); do \
+		enzyme-adapter-react-install $$version; \
+		NODE_ENV=test mocha; \
+	done
+
+	# Test latest and generate coverage report
+	NODE_ENV=test BABEL_ENV=cover nyc --reporter cobertura --report-dir . mocha $(MOCHA_OPTS) --reporter mocha-junit-reporter; \
+	find ./node_modules/ -name coverage.json -exec rm {} \; ;\
 
 build:
 	rm -rf dist
diff --git a/packages/react-spectrum/package.json b/packages/react-spectrum/package.json
index db591ab0..748f5783 100644
--- a/packages/react-spectrum/package.json
+++ b/packages/react-spectrum/package.json
@@ -4,7 +4,7 @@
   "description": "Spectrum UI components in React",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Livefyre/react-spectrum"
+    "url": "https://git.corp.adobe.com.com/React/react-spectrum"
   },
   "scripts": {
     "start": "make run",
@@ -12,30 +12,30 @@
     "test:watch": "mocha --watch --reporter dot"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "react": "^0.14 || ^15 || ^16",
+    "react-dom": "^0.14 || ^15 || ^16"
   },
   "dependencies": {
+    "@react/collection-view": "^2.2.0",
     "autobind-decorator": "^1.4.0",
     "classnames": "^2.2.5",
-    "@react/collection-view": "^2.2.0",
     "moment": "^2.15.1",
     "moment-range": "^3.0.3",
-    "react-overlays": "0.8.1",
+    "react-overlays": "0.8.3",
     "react-transition-group": "^2.2.0",
     "stringify": "^5.1.0"
   },
   "devDependencies": {
-    "@kadira/react-storybook-addon-info": "^3.2.4",
-    "@kadira/storybook": "^2.24.1",
-    "@kadira/storybook-addon-knobs": "^1.3.3",
     "@spectrum/spectrum-css": "2.0.0-beta.48",
     "@spectrum/spectrum-flexbox-grid": "1.1.1",
     "@spectrum/spectrum-variables": "1.0.1",
+    "@storybook/addon-info": "^3.2.13",
+    "@storybook/addon-knobs": "3.2.13",
+    "@storybook/react": "3.2.13",
     "babel": "^6.5.2",
     "babel-cli": "^6.16.0",
-    "babel-core": "^6.17.0",
-    "babel-loader": "^6.2.5",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-syntax-class-properties": "^6.13.0",
     "babel-plugin-syntax-decorators": "^6.13.0",
@@ -54,8 +54,10 @@
     "babel-register": "^6.16.3",
     "babel-runtime": "^6.11.6",
     "babelify": "^7.3.0",
-    "css-loader": "^0.25.0",
-    "enzyme": "^2.5.1",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-adapter-react-helper": "^1.2.1",
     "file-loader": "^0.9.0",
     "ignore-styles": "^5.0.1",
     "jsdom": "^9.8.0",
@@ -66,13 +68,13 @@
     "nib": "^1.1.2",
     "normalize.css": "^7.0.0",
     "nyc": "^10.2.0",
-    "react": "^15.3.2",
-    "react-addons-test-utils": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "prop-types": "^15.6.0",
+    "react": "^0.14 || ^15 || ^16",
+    "react-dom": "^0.14 || ^15 || ^16",
     "sinon": "^2.2.0",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.19.0",
     "stylus": "^0.54.5",
-    "stylus-loader": "^2.3.1",
+    "stylus-loader": "^3.0.1",
     "svg-stylus": "^0.0.5",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",
diff --git a/packages/react-spectrum/src/Accordion/js/Accordion.js b/packages/react-spectrum/src/Accordion/js/Accordion.js
index fec5822e..5895611e 100644
--- a/packages/react-spectrum/src/Accordion/js/Accordion.js
+++ b/packages/react-spectrum/src/Accordion/js/Accordion.js
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import '../style/index.styl';
 
@@ -141,7 +142,7 @@ Accordion.displayName = 'Accordion';
 
 Accordion.propTypes = {
   onChange() {},
-  multiselectable: React.PropTypes.bool
+  multiselectable: PropTypes.bool
 };
 
 Accordion.defaultProps = {
diff --git a/packages/react-spectrum/src/Accordion/js/AccordionItem.js b/packages/react-spectrum/src/Accordion/js/AccordionItem.js
index 7aea5db3..2b2bac22 100644
--- a/packages/react-spectrum/src/Accordion/js/AccordionItem.js
+++ b/packages/react-spectrum/src/Accordion/js/AccordionItem.js
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import createId from '../../utils/createId';
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 
 /**
@@ -7,10 +8,10 @@ import React, {Component} from 'react';
  */
 export default class AccordionItem extends Component {
   static propTypes = {
-    header: React.PropTypes.string,
-    selected: React.PropTypes.bool,
-    disabled: React.PropTypes.bool,
-    onItemClick: React.PropTypes.func
+    header: PropTypes.string,
+    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onItemClick: PropTypes.func
   };
 
   static defaultProps = {
diff --git a/packages/react-spectrum/src/Calendar/js/Calendar.js b/packages/react-spectrum/src/Calendar/js/Calendar.js
index 837fdffe..db37c02c 100644
--- a/packages/react-spectrum/src/Calendar/js/Calendar.js
+++ b/packages/react-spectrum/src/Calendar/js/Calendar.js
@@ -5,7 +5,8 @@ import createId from '../../utils/createId';
 import {DateRange} from 'moment-range';
 import {formatMoment, isDateInRange, toMoment} from '../../utils/moment';
 import moment from 'moment';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import '../style/index.styl';
 
 @autobind
diff --git a/packages/react-spectrum/src/Clock/js/Clock.js b/packages/react-spectrum/src/Clock/js/Clock.js
index 9ee711d9..de793386 100644
--- a/packages/react-spectrum/src/Clock/js/Clock.js
+++ b/packages/react-spectrum/src/Clock/js/Clock.js
@@ -3,7 +3,8 @@ import {clamp} from '../../utils/number';
 import classNames from 'classnames';
 import {formatMoment, toMoment} from '../../utils/moment';
 import moment from 'moment';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import Textfield from '../../Textfield';
 import '../style/index.styl';
 
diff --git a/packages/react-spectrum/src/Datepicker/js/Datepicker.js b/packages/react-spectrum/src/Datepicker/js/Datepicker.js
index 7204821d..062ab66f 100644
--- a/packages/react-spectrum/src/Datepicker/js/Datepicker.js
+++ b/packages/react-spectrum/src/Datepicker/js/Datepicker.js
@@ -8,7 +8,8 @@ import InputGroup from '../../InputGroup';
 import moment from 'moment';
 import OverlayTrigger from '../../OverlayTrigger';
 import Popover from '../../Popover';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import Textfield from '../../Textfield';
 import {toMoment} from '../../utils/moment';
 import '../style/index.styl';
diff --git a/packages/react-spectrum/src/Menu/js/Menu.js b/packages/react-spectrum/src/Menu/js/Menu.js
index b7f86890..46230660 100644
--- a/packages/react-spectrum/src/Menu/js/Menu.js
+++ b/packages/react-spectrum/src/Menu/js/Menu.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import {List} from '../../List';
-import React, {PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';
 import '../style/index.styl';
 
diff --git a/packages/react-spectrum/src/ModalContainer/js/ModalContainer.js b/packages/react-spectrum/src/ModalContainer/js/ModalContainer.js
index 0edfcea6..278263e9 100644
--- a/packages/react-spectrum/src/ModalContainer/js/ModalContainer.js
+++ b/packages/react-spectrum/src/ModalContainer/js/ModalContainer.js
@@ -60,6 +60,9 @@ class Modal extends React.Component {
   }
 }
 
-function Underlay({open, ...props}) {
-  return <div {...props} className={classNames('spectrum-Underlay', {'is-open': open})} />;
+class Underlay extends React.Component {
+  render() {
+    let {open, ...props} = this.props;
+    return <div {...props} className={classNames('spectrum-Underlay', {'is-open': open})} />;
+  }
 }
diff --git a/packages/react-spectrum/src/NumberInput/js/NumberInput.js b/packages/react-spectrum/src/NumberInput/js/NumberInput.js
index a490d787..eca20a10 100644
--- a/packages/react-spectrum/src/NumberInput/js/NumberInput.js
+++ b/packages/react-spectrum/src/NumberInput/js/NumberInput.js
@@ -3,7 +3,8 @@ import Button from '../../Button';
 import classNames from 'classnames';
 import createId from '../../utils/createId';
 import InputGroup from '../../InputGroup';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import Textfield from '../../Textfield';
 import '../style/index.styl';
diff --git a/packages/react-spectrum/src/OverlayTrigger/js/OverlayTrigger.js b/packages/react-spectrum/src/OverlayTrigger/js/OverlayTrigger.js
index 6c64b1e0..c1124722 100644
--- a/packages/react-spectrum/src/OverlayTrigger/js/OverlayTrigger.js
+++ b/packages/react-spectrum/src/OverlayTrigger/js/OverlayTrigger.js
@@ -1,7 +1,8 @@
 
 import autobind from 'autobind-decorator';
 import Overlay from './Overlay';
-import React, {cloneElement, Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {cloneElement, Component} from 'react';
 import ReactDOM from 'react-dom';
 
 const triggerType = PropTypes.oneOf(['click', 'hover', 'focus']);
diff --git a/packages/react-spectrum/src/Popover/js/Popover.js b/packages/react-spectrum/src/Popover/js/Popover.js
index d550de5b..6fd0facc 100644
--- a/packages/react-spectrum/src/Popover/js/Popover.js
+++ b/packages/react-spectrum/src/Popover/js/Popover.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import DialogHeader from '../../Dialog/js/DialogHeader';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import '../style/index.styl';
 import '../../Dialog/style/index.styl';
 
@@ -66,4 +67,3 @@ export default class Popover extends Component {
 }
 
 Popover.displayName = 'Popover';
-
diff --git a/packages/react-spectrum/src/Shell/js/ShellMenu.js b/packages/react-spectrum/src/Shell/js/ShellMenu.js
index f82c5092..6b7c8697 100644
--- a/packages/react-spectrum/src/Shell/js/ShellMenu.js
+++ b/packages/react-spectrum/src/Shell/js/ShellMenu.js
@@ -33,10 +33,6 @@ export default class ShellMenu extends Component {
     };
   }
 
-  componentDidMount() {
-    this.menuRef.addEventListener(getTransitionEvent(), this.handleTransitionEnd);
-  }
-
   componentWillReceiveProps(nextProps) {
     if ('open' in nextProps) {
       this.setState({open: nextProps.open});
@@ -44,7 +40,19 @@ export default class ShellMenu extends Component {
   }
 
   componentWillUnmount() {
-    this.menuRef.removeEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    if (this.menuRef) {
+      this.menuRef.removeEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    }
+  }
+
+  bindMenuRef(ref) {
+    if (this.menuRef) {
+      this.menuRef.removeEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    }
+    this.menuRef = ref;
+    if (this.menuRef) {
+      this.menuRef.addEventListener(getTransitionEvent(), this.handleTransitionEnd);
+    }
   }
 
   setOpen(open) {
@@ -132,7 +140,7 @@ export default class ShellMenu extends Component {
         <Portal>
           <RootCloseWrapper onRootClose={this.handleMenuClose} disabled={!open}>
             <div
-              ref={el => {this.menuRef = el; }}
+              ref={el => {this.bindMenuRef(el); }}
               style={{zIndex}}
               className={
                 classNames(
diff --git a/packages/react-spectrum/src/TableView/js/TableView.js b/packages/react-spectrum/src/TableView/js/TableView.js
index 8a812449..51671470 100644
--- a/packages/react-spectrum/src/TableView/js/TableView.js
+++ b/packages/react-spectrum/src/TableView/js/TableView.js
@@ -1,7 +1,8 @@
 import autobind from 'autobind-decorator';
 import classNames from 'classnames';
 import {EditableCollectionView} from '@react/collection-view';
-import React, {Component, PropTypes} from 'react';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import TableCell from './TableCell';
 import TableRow from './TableRow';
 import TableViewLayout from './TableViewLayout';
diff --git a/packages/react-spectrum/stories/Accordion.js b/packages/react-spectrum/stories/Accordion.js
index e59fe7ee..72188270 100644
--- a/packages/react-spectrum/stories/Accordion.js
+++ b/packages/react-spectrum/stories/Accordion.js
@@ -1,5 +1,5 @@
 import {Accordion, AccordionItem} from '../src/Accordion';
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
 
diff --git a/packages/react-spectrum/stories/Alert.js b/packages/react-spectrum/stories/Alert.js
index 0c74f7e1..816a5e13 100644
--- a/packages/react-spectrum/stories/Alert.js
+++ b/packages/react-spectrum/stories/Alert.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Alert from '../src/Alert';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Autocomplete.js b/packages/react-spectrum/stories/Autocomplete.js
index 9e8b31ea..016efbdc 100644
--- a/packages/react-spectrum/stories/Autocomplete.js
+++ b/packages/react-spectrum/stories/Autocomplete.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Autocomplete from '../src/Autocomplete';
 import React from 'react';
 import Textfield from '../src/Textfield';
diff --git a/packages/react-spectrum/stories/Breadcrumbs.js b/packages/react-spectrum/stories/Breadcrumbs.js
index 258d262f..0788c634 100644
--- a/packages/react-spectrum/stories/Breadcrumbs.js
+++ b/packages/react-spectrum/stories/Breadcrumbs.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Breadcrumbs from '../src/Breadcrumbs';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Button.js b/packages/react-spectrum/stories/Button.js
index 6ca3cd54..c6c0d13c 100644
--- a/packages/react-spectrum/stories/Button.js
+++ b/packages/react-spectrum/stories/Button.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../src/Button';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/ButtonGroup.js b/packages/react-spectrum/stories/ButtonGroup.js
index 341f610d..d2c30ee7 100644
--- a/packages/react-spectrum/stories/ButtonGroup.js
+++ b/packages/react-spectrum/stories/ButtonGroup.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../src/Button';
 import ButtonGroup from '../src/ButtonGroup';
 import React from 'react';
diff --git a/packages/react-spectrum/stories/Calendar.js b/packages/react-spectrum/stories/Calendar.js
index 0502df84..86db76ef 100644
--- a/packages/react-spectrum/stories/Calendar.js
+++ b/packages/react-spectrum/stories/Calendar.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Calendar from '../src/Calendar';
 import moment from 'moment';
 import React from 'react';
diff --git a/packages/react-spectrum/stories/Checkbox.js b/packages/react-spectrum/stories/Checkbox.js
index a5e4dc4b..07750b0d 100644
--- a/packages/react-spectrum/stories/Checkbox.js
+++ b/packages/react-spectrum/stories/Checkbox.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Checkbox from '../src/Checkbox';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Clock.js b/packages/react-spectrum/stories/Clock.js
index e506380f..adc50a60 100644
--- a/packages/react-spectrum/stories/Clock.js
+++ b/packages/react-spectrum/stories/Clock.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Clock from '../src/Clock';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/ComboBox.js b/packages/react-spectrum/stories/ComboBox.js
index 75ea607e..42cc4495 100644
--- a/packages/react-spectrum/stories/ComboBox.js
+++ b/packages/react-spectrum/stories/ComboBox.js
@@ -1,6 +1,6 @@
 import ComboBox from '../src/ComboBox';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 const OPTIONS = [
diff --git a/packages/react-spectrum/stories/Datepicker.js b/packages/react-spectrum/stories/Datepicker.js
index 29c849d4..2c4c0190 100644
--- a/packages/react-spectrum/stories/Datepicker.js
+++ b/packages/react-spectrum/stories/Datepicker.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Datepicker from '../src/Datepicker';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Dialog.js b/packages/react-spectrum/stories/Dialog.js
index b291197e..bb276a7a 100644
--- a/packages/react-spectrum/stories/Dialog.js
+++ b/packages/react-spectrum/stories/Dialog.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../src/Button';
 import Dialog from '../src/Dialog';
 import ModalTrigger from '../src/ModalTrigger';
diff --git a/packages/react-spectrum/stories/Dropdown.js b/packages/react-spectrum/stories/Dropdown.js
index e94ffbec..fc8151b8 100644
--- a/packages/react-spectrum/stories/Dropdown.js
+++ b/packages/react-spectrum/stories/Dropdown.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../src/Button';
 import Dropdown from '../src/Dropdown';
 import {Menu, MenuItem} from '../src/Menu';
diff --git a/packages/react-spectrum/stories/DropdownButton.js b/packages/react-spectrum/stories/DropdownButton.js
index 8697654a..3b8eb9b6 100644
--- a/packages/react-spectrum/stories/DropdownButton.js
+++ b/packages/react-spectrum/stories/DropdownButton.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import DropdownButton from '../src/DropdownButton';
 import {MenuItem} from '../src/Menu';
 import React from 'react';
diff --git a/packages/react-spectrum/stories/Grid.js b/packages/react-spectrum/stories/Grid.js
index cc621096..421bb34c 100644
--- a/packages/react-spectrum/stories/Grid.js
+++ b/packages/react-spectrum/stories/Grid.js
@@ -1,6 +1,6 @@
 import {Grid, GridColumn, GridRow} from '../src/Grid';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 var boxRow = {
diff --git a/packages/react-spectrum/stories/Heading.js b/packages/react-spectrum/stories/Heading.js
index 5df9ee0a..45c12a42 100644
--- a/packages/react-spectrum/stories/Heading.js
+++ b/packages/react-spectrum/stories/Heading.js
@@ -1,6 +1,6 @@
 import Heading from '../src/Heading';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('Heading', module)
diff --git a/packages/react-spectrum/stories/Icon.js b/packages/react-spectrum/stories/Icon.js
index 3d01f07c..bf1aee79 100644
--- a/packages/react-spectrum/stories/Icon.js
+++ b/packages/react-spectrum/stories/Icon.js
@@ -1,6 +1,6 @@
 import Icon from '../src/Icon';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('Icon', module)
diff --git a/packages/react-spectrum/stories/InlineEditor.js b/packages/react-spectrum/stories/InlineEditor.js
index 199831be..a409bb7e 100644
--- a/packages/react-spectrum/stories/InlineEditor.js
+++ b/packages/react-spectrum/stories/InlineEditor.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import InlineEditor from '../src/InlineEditor';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Link.js b/packages/react-spectrum/stories/Link.js
index c9c160bf..81226692 100644
--- a/packages/react-spectrum/stories/Link.js
+++ b/packages/react-spectrum/stories/Link.js
@@ -1,6 +1,6 @@
 import Link from '../src/Link';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('Link', module)
diff --git a/packages/react-spectrum/stories/List.js b/packages/react-spectrum/stories/List.js
index 571cf7e4..1f43e179 100644
--- a/packages/react-spectrum/stories/List.js
+++ b/packages/react-spectrum/stories/List.js
@@ -1,6 +1,6 @@
 import {List, ListItem} from '../src/List';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('List', module)
diff --git a/packages/react-spectrum/stories/ModalTrigger.js b/packages/react-spectrum/stories/ModalTrigger.js
index 1397811a..6de9095f 100644
--- a/packages/react-spectrum/stories/ModalTrigger.js
+++ b/packages/react-spectrum/stories/ModalTrigger.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../src/Button';
 import Dialog from '../src/Dialog';
 import ModalTrigger from '../src/ModalTrigger';
diff --git a/packages/react-spectrum/stories/NumberInput.js b/packages/react-spectrum/stories/NumberInput.js
index c3d12d18..3a5b56f5 100644
--- a/packages/react-spectrum/stories/NumberInput.js
+++ b/packages/react-spectrum/stories/NumberInput.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import NumberInput from '../src/NumberInput';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/OverlayTrigger.js b/packages/react-spectrum/stories/OverlayTrigger.js
index 5c8a442f..d707e6f3 100644
--- a/packages/react-spectrum/stories/OverlayTrigger.js
+++ b/packages/react-spectrum/stories/OverlayTrigger.js
@@ -2,7 +2,7 @@ import Button from '../src/Button';
 import OverlayTrigger from '../src/OverlayTrigger';
 import Popover from '../src/Popover';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import Tooltip from '../src/Tooltip';
 import {VerticalCenter} from '../.storybook/layout';
 
diff --git a/packages/react-spectrum/stories/Popover.js b/packages/react-spectrum/stories/Popover.js
index 9d22e144..7ad5ca8e 100644
--- a/packages/react-spectrum/stories/Popover.js
+++ b/packages/react-spectrum/stories/Popover.js
@@ -1,7 +1,7 @@
 import Heading from '../src/Heading';
 import Popover from '../src/Popover';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('Popover', module)
diff --git a/packages/react-spectrum/stories/Progress.js b/packages/react-spectrum/stories/Progress.js
index 5124ef54..f14ec1d6 100644
--- a/packages/react-spectrum/stories/Progress.js
+++ b/packages/react-spectrum/stories/Progress.js
@@ -1,6 +1,6 @@
 import Progress from '../src/Progress';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('Progress', module)
diff --git a/packages/react-spectrum/stories/Radio.js b/packages/react-spectrum/stories/Radio.js
index 0598e0ff..0968f513 100644
--- a/packages/react-spectrum/stories/Radio.js
+++ b/packages/react-spectrum/stories/Radio.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Radio from '../src/Radio';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/RadioGroup.js b/packages/react-spectrum/stories/RadioGroup.js
index cd939a37..effd51cd 100644
--- a/packages/react-spectrum/stories/RadioGroup.js
+++ b/packages/react-spectrum/stories/RadioGroup.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Radio from '../src/Radio';
 import RadioGroup from '../src/RadioGroup';
 import React from 'react';
diff --git a/packages/react-spectrum/stories/Rating.js b/packages/react-spectrum/stories/Rating.js
index 84baceb5..e194f3e5 100644
--- a/packages/react-spectrum/stories/Rating.js
+++ b/packages/react-spectrum/stories/Rating.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Rating from '../src/Rating';
 import React from 'react';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Search.js b/packages/react-spectrum/stories/Search.js
index 9c5fa67f..4732b2e8 100644
--- a/packages/react-spectrum/stories/Search.js
+++ b/packages/react-spectrum/stories/Search.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import Search from '../src/Search';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Select.js b/packages/react-spectrum/stories/Select.js
index 903f6e9d..5c7e773f 100644
--- a/packages/react-spectrum/stories/Select.js
+++ b/packages/react-spectrum/stories/Select.js
@@ -1,8 +1,8 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import Select from '../src/Select';
 import {VerticalCenter} from '../.storybook/layout';
-import {withKnobs} from '@kadira/storybook-addon-knobs';
+import {withKnobs} from '@storybook/addon-knobs';
 
 const defaultProps = {
   options: [
diff --git a/packages/react-spectrum/stories/SelectList.js b/packages/react-spectrum/stories/SelectList.js
index ff203387..58d63338 100644
--- a/packages/react-spectrum/stories/SelectList.js
+++ b/packages/react-spectrum/stories/SelectList.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import SelectList from '../src/SelectList';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Slider.js b/packages/react-spectrum/stories/Slider.js
index 5f79ab8a..299cda3f 100644
--- a/packages/react-spectrum/stories/Slider.js
+++ b/packages/react-spectrum/stories/Slider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Slider from '../src/Slider';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 storiesOf('Slider', module)
diff --git a/packages/react-spectrum/stories/SplitButton.js b/packages/react-spectrum/stories/SplitButton.js
index db3c0fbc..4ae99e22 100644
--- a/packages/react-spectrum/stories/SplitButton.js
+++ b/packages/react-spectrum/stories/SplitButton.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import {MenuItem} from '../src/Menu';
 import React from 'react';
 import SplitButton from '../src/SplitButton';
diff --git a/packages/react-spectrum/stories/StepList.js b/packages/react-spectrum/stories/StepList.js
index 04e79722..89997734 100644
--- a/packages/react-spectrum/stories/StepList.js
+++ b/packages/react-spectrum/stories/StepList.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import {Step, StepList} from '../src/StepList';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Switch.js b/packages/react-spectrum/stories/Switch.js
index 5c6c3768..d62b3410 100644
--- a/packages/react-spectrum/stories/Switch.js
+++ b/packages/react-spectrum/stories/Switch.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import Switch from '../src/Switch';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/TabList.js b/packages/react-spectrum/stories/TabList.js
index edb9edf9..862ab659 100644
--- a/packages/react-spectrum/stories/TabList.js
+++ b/packages/react-spectrum/stories/TabList.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import {Tab, TabList} from '../src/TabList';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/TabView.js b/packages/react-spectrum/stories/TabView.js
index c18198fd..7d7398bd 100644
--- a/packages/react-spectrum/stories/TabView.js
+++ b/packages/react-spectrum/stories/TabView.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import {Tab, TabView} from '../src/TabView';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Table.js b/packages/react-spectrum/stories/Table.js
index 34f25be0..b32ed418 100644
--- a/packages/react-spectrum/stories/Table.js
+++ b/packages/react-spectrum/stories/Table.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {Table, TBody, TD, TH, THead, TR} from '../src/Table';
 import {VerticalCenter} from '../.storybook/layout';
 
diff --git a/packages/react-spectrum/stories/TableView.js b/packages/react-spectrum/stories/TableView.js
index 959dd74c..1867423b 100644
--- a/packages/react-spectrum/stories/TableView.js
+++ b/packages/react-spectrum/stories/TableView.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import Switch from '../src/Switch';
 import {TableView, TableViewDataSource} from '../src/TableView';
diff --git a/packages/react-spectrum/stories/Tag.js b/packages/react-spectrum/stories/Tag.js
index 9db2c6cd..7dc87533 100644
--- a/packages/react-spectrum/stories/Tag.js
+++ b/packages/react-spectrum/stories/Tag.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import {Tag} from '../src/TagList';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/TagField.js b/packages/react-spectrum/stories/TagField.js
index ffc619bb..642502fe 100644
--- a/packages/react-spectrum/stories/TagField.js
+++ b/packages/react-spectrum/stories/TagField.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import TagField from '../src/TagField';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/TagList.js b/packages/react-spectrum/stories/TagList.js
index a7273c71..17ca923a 100644
--- a/packages/react-spectrum/stories/TagList.js
+++ b/packages/react-spectrum/stories/TagList.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import {Tag, TagList} from '../src/TagList';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Textarea.js b/packages/react-spectrum/stories/Textarea.js
index 5b68fe42..b9bec027 100644
--- a/packages/react-spectrum/stories/Textarea.js
+++ b/packages/react-spectrum/stories/Textarea.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import Textarea from '../src/Textarea';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Textfield.js b/packages/react-spectrum/stories/Textfield.js
index 78831014..d8338424 100644
--- a/packages/react-spectrum/stories/Textfield.js
+++ b/packages/react-spectrum/stories/Textfield.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import Textfield from '../src/Textfield';
 import {VerticalCenter} from '../.storybook/layout';
diff --git a/packages/react-spectrum/stories/Toast.js b/packages/react-spectrum/stories/Toast.js
index c7f24da1..b916ae36 100644
--- a/packages/react-spectrum/stories/Toast.js
+++ b/packages/react-spectrum/stories/Toast.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../src/Button';
 import React from 'react';
 import {success, Toast} from '../src/Toast';
diff --git a/packages/react-spectrum/stories/Tooltip.js b/packages/react-spectrum/stories/Tooltip.js
index 3c57011e..5723fe0f 100644
--- a/packages/react-spectrum/stories/Tooltip.js
+++ b/packages/react-spectrum/stories/Tooltip.js
@@ -1,7 +1,7 @@
 import Button from '../src/Button';
 import OverlayTrigger from '../src/OverlayTrigger';
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import Tooltip from '../src/Tooltip';
 import {VerticalCenter} from '../.storybook/layout';
 
diff --git a/packages/react-spectrum/stories/Wait.js b/packages/react-spectrum/stories/Wait.js
index 522edf5f..016f5214 100644
--- a/packages/react-spectrum/stories/Wait.js
+++ b/packages/react-spectrum/stories/Wait.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 import Wait from '../src/Wait';
diff --git a/packages/react-spectrum/stories/Well.js b/packages/react-spectrum/stories/Well.js
index 11902750..48baa7b1 100644
--- a/packages/react-spectrum/stories/Well.js
+++ b/packages/react-spectrum/stories/Well.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../.storybook/layout';
 
 import Well from '../src/Well';
diff --git a/packages/react-spectrum/stories/shell/ShellHeader.js b/packages/react-spectrum/stories/shell/ShellHeader.js
index 1ef74513..07defd6b 100644
--- a/packages/react-spectrum/stories/shell/ShellHeader.js
+++ b/packages/react-spectrum/stories/shell/ShellHeader.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import Button from '../../src/Button';
 import React from 'react';
 import ShellActions from '../../src/Shell/js/ShellActions';
diff --git a/packages/react-spectrum/stories/shell/ShellHelp.js b/packages/react-spectrum/stories/shell/ShellHelp.js
index 0b17199a..74778c3c 100644
--- a/packages/react-spectrum/stories/shell/ShellHelp.js
+++ b/packages/react-spectrum/stories/shell/ShellHelp.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import ShellHelp from '../../src/Shell/js/ShellHelp';
 import {VerticalCenter} from '../../.storybook/layout';
diff --git a/packages/react-spectrum/stories/shell/ShellOrgSwitcher.js b/packages/react-spectrum/stories/shell/ShellOrgSwitcher.js
index b7fa8257..f2096f31 100644
--- a/packages/react-spectrum/stories/shell/ShellOrgSwitcher.js
+++ b/packages/react-spectrum/stories/shell/ShellOrgSwitcher.js
@@ -1,4 +1,4 @@
-import {action, storiesOf} from '@kadira/storybook';
+import {action, storiesOf} from '@storybook/react';
 import React from 'react';
 import ShellOrgSwitcher from '../../src/Shell/js/ShellOrgSwitcher';
 import {VerticalCenter} from '../../.storybook/layout';
diff --git a/packages/react-spectrum/stories/shell/ShellSolutionSwitcher.js b/packages/react-spectrum/stories/shell/ShellSolutionSwitcher.js
index cdfd20c9..6aae23b2 100644
--- a/packages/react-spectrum/stories/shell/ShellSolutionSwitcher.js
+++ b/packages/react-spectrum/stories/shell/ShellSolutionSwitcher.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ShellSolution from '../../src/Shell/js/ShellSolution';
 import ShellSolutionGroup from '../../src/Shell/js/ShellSolutionGroup';
 import ShellSolutionSwitcher from '../../src/Shell/js/ShellSolutionSwitcher';
-import {storiesOf} from '@kadira/storybook';
+import {storiesOf} from '@storybook/react';
 import {VerticalCenter} from '../../.storybook/layout';
 
 storiesOf('ShellSolutionSwitcher', module)
diff --git a/packages/react-spectrum/test/.setup.js b/packages/react-spectrum/test/.setup.js
index bc3b9ec1..063211bb 100644
--- a/packages/react-spectrum/test/.setup.js
+++ b/packages/react-spectrum/test/.setup.js
@@ -1,4 +1,5 @@
 import {jsdom} from 'jsdom';
+import configure from 'enzyme-adapter-react-helper';
 
 const exposedProperties = [ 'window', 'navigator', 'document' ];
 
@@ -14,3 +15,5 @@ Object.keys(document.defaultView).forEach(property => {
 global.navigator = {
   userAgent: 'node.js'
 };
+
+configure();
diff --git a/packages/react-spectrum/test/Accordion/Accordion.js b/packages/react-spectrum/test/Accordion/Accordion.js
index 7195e2b8..c148545c 100644
--- a/packages/react-spectrum/test/Accordion/Accordion.js
+++ b/packages/react-spectrum/test/Accordion/Accordion.js
@@ -4,6 +4,7 @@ import {mount, shallow} from 'enzyme';
 import React from 'react';
 import sinon from 'sinon';
 
+
 describe('Accordion', () => {
   it('supports additional classNames', () => {
     const tree = shallow(<Accordion className="myClass" />);
@@ -27,7 +28,7 @@ describe('Accordion', () => {
     const assertChildWithClassNameSelected = (tree, className) => {
       const child = tree.find('[selected=true]');
       assert.equal(child.length, 1);
-      assert.equal(child.node.props.className, className);
+      assert.equal(child.prop('className'), className);
     };
 
     it('supports string index', () => {
@@ -63,7 +64,7 @@ describe('Accordion', () => {
     const child = tree.find('[selected=true]');
 
     assert.equal(child.length, 1);
-    assert.equal(child.node.props.className, 'two');
+    assert.equal(child.prop('className'), 'two');
   });
 
   it('does not call onChange if descendant input is changed', () => {
diff --git a/packages/react-spectrum/test/Alert/Alert.js b/packages/react-spectrum/test/Alert/Alert.js
index 50a2d33b..3a1f4887 100644
--- a/packages/react-spectrum/test/Alert/Alert.js
+++ b/packages/react-spectrum/test/Alert/Alert.js
@@ -11,7 +11,7 @@ describe('Alert', () => {
     assertAlertClassAndIcon(tree, 'info');
     assert.equal(tree.find('.spectrum-Alert-header').length, 1);
     assert.equal(tree.find('.spectrum-Alert-content').length, 1);
-    assert(!tree.find('.spectrum-Alert-closeButton').node);
+    assert.equal(tree.find('.spectrum-Alert-closeButton').length, 0);
   });
 
   it('supports large size', () => {
@@ -47,14 +47,14 @@ describe('Alert', () => {
     const tree = shallow(<Alert header={<div>My Custom Header</div>} />);
     const child = tree.find('.spectrum-Alert-header > div');
     assert.equal(child.length, 1);
-    assert.equal(child.children().node, 'My Custom Header');
+    assert.equal(child.children().text(), 'My Custom Header');
   });
 
   it('supports children', () => {
     const tree = shallow(<Alert><div>My Custom Content</div></Alert>);
     const child = tree.find('.spectrum-Alert-content > div');
     assert.equal(child.length, 1);
-    assert.equal(child.children().node, 'My Custom Content');
+    assert.equal(child.children().text(), 'My Custom Content');
   });
 });
 
diff --git a/packages/react-spectrum/test/Autocomplete/Autocomplete.js b/packages/react-spectrum/test/Autocomplete/Autocomplete.js
index 9e0be688..fd56f9ca 100644
--- a/packages/react-spectrum/test/Autocomplete/Autocomplete.js
+++ b/packages/react-spectrum/test/Autocomplete/Autocomplete.js
@@ -6,7 +6,6 @@ import {shallow} from 'enzyme';
 import sinon from 'sinon';
 import {sleep} from '../utils';
 
-
 const assertMenuFocusStates = (tree, expectedFocusStates) => {
   assert.deepEqual(tree.find(MenuItem).map(c => c.prop('focused')), expectedFocusStates);
 };
@@ -52,9 +51,13 @@ describe('Autocomplete', () => {
     await sleep(1); // Wait for async getCompletions
 
     assert.equal(tree.find('input').prop('value'), 'test');
+
+    tree.find('input').simulate('mouseEnter');
+    await sleep(1);
+
     assert.equal(tree.childAt(1).prop('show'), true);
     assert.equal(tree.find(MenuItem).length, 2);
-    assert.equal(tree.find(MenuItem).nodes[0].key, 'item-0');
+    assert.equal(tree.find(MenuItem).getElements()[0].key, 'item-0');
   });
 
   it('should call getCompletions and render a menu with results asynchronously', async () => {
@@ -75,7 +78,14 @@ describe('Autocomplete', () => {
     await sleep(15); // Wait for async getCompletions
 
     assert.equal(tree.find('input').prop('value'), 'test');
+
+    tree.find('input').simulate('mouseEnter');
+    await sleep(1);
+
     assert.equal(tree.childAt(1).prop('show'), true);
+
+    tree.find('input').simulate('mouseEnter');
+    await sleep(1);
     assert.equal(tree.find(MenuItem).length, 2);
   });
 
@@ -90,6 +100,8 @@ describe('Autocomplete', () => {
     tree.find('input').simulate('change', 'test');
 
     await sleep(1); // Wait for async getCompletions
+    tree.find('input').simulate('mouseEnter');
+    await sleep(1);
 
     assertMenuFocusStates(tree, [true, false, false]);
 
@@ -161,7 +173,8 @@ describe('Autocomplete', () => {
       </Autocomplete>
     );
 
-    tree.find('input').simulate('focus').simulate('change', 'test');
+    tree.find('input').simulate('focus');
+    tree.find('input').simulate('change', 'test');
 
     await sleep(1); // Wait for async getCompletions
 
@@ -202,7 +215,6 @@ describe('Autocomplete', () => {
     assert.deepEqual(onChange.getCall(1).args[0], 'one');
     assert.equal(onSelect.callCount, 1);
     assert.equal(onSelect.getCall(0).args[0], 'one');
-
     assert.equal(tree.find('input').prop('value'), 'foo');
   });
 
@@ -214,10 +226,13 @@ describe('Autocomplete', () => {
       </Autocomplete>
     );
 
-    tree.find('input').simulate('focus').simulate('change', 'test');
+    tree.find('input').simulate('focus');
+    tree.find('input').simulate('change', 'test');
 
     await sleep(1); // Wait for async getCompletions
 
+    tree.find('input').simulate('focus');
+
     // No menu item selected
     assertMenuFocusStates(tree, [false, false, false]);
 
@@ -237,10 +252,14 @@ describe('Autocomplete', () => {
     );
 
     tree.instance().toggleMenu();
+
     await sleep(1);
+    tree.update();
     assert.equal(tree.childAt(1).prop('show'), true);
 
     tree.instance().toggleMenu();
+    tree.update();
+
     assert.equal(tree.childAt(1).prop('show'), false);
   });
 
@@ -252,7 +271,8 @@ describe('Autocomplete', () => {
       </Autocomplete>
     );
 
-    tree.find('input').simulate('focus').simulate('change', 'test');
+    tree.find('input').simulate('focus');
+    tree.find('input').simulate('change', 'test');
 
     await sleep(1);
 
@@ -275,9 +295,8 @@ describe('Autocomplete', () => {
       );
       const input = tree.find('input');
 
-      input
-        .simulate('focus')
-        .simulate('change', 't');
+      input.simulate('focus');
+      input.simulate('change', 't');
 
       await sleep(1);
 
diff --git a/packages/react-spectrum/test/Button/Button.js b/packages/react-spectrum/test/Button/Button.js
index 7f541161..1766c66f 100644
--- a/packages/react-spectrum/test/Button/Button.js
+++ b/packages/react-spectrum/test/Button/Button.js
@@ -70,7 +70,7 @@ describe('Button', () => {
     const tree = shallow(<Button><div>My Custom Content</div></Button>);
     const child = tree.find('div');
     assert.equal(child.length, 1);
-    assert.equal(child.children().node, 'My Custom Content');
+    assert.equal(child.children().text(), 'My Custom Content');
   });
 
   it('can be clicked', () => {
@@ -101,12 +101,12 @@ describe('Button', () => {
   describe('label', () => {
     it('doesn\'t render a label by default', () => {
       const tree = shallow(<Button />);
-      assert(!tree.children().last().node);
+      assert(!tree.children().last().text());
     });
 
     it('supports label text', () => {
       const tree = shallow(<Button label="My Label" />);
-      assert.equal(tree.find('.spectrum-Button-label').children().last().node, 'My Label');
+      assert.equal(tree.find('.spectrum-Button-label').children().last().text(), 'My Label');
     });
   });
 });
diff --git a/packages/react-spectrum/test/Calendar/Calendar.js b/packages/react-spectrum/test/Calendar/Calendar.js
index 59774414..f9bac152 100644
--- a/packages/react-spectrum/test/Calendar/Calendar.js
+++ b/packages/react-spectrum/test/Calendar/Calendar.js
@@ -40,6 +40,8 @@ describe('Calendar', () => {
     const weekLater = date.clone().add(1, 'week');
     const tree = shallow(<Calendar defaultValue={date} />);
 
+    tree.instance().componentWillMount();
+
     // Setting defaultValue later doesn't change the state. Only component interactions
     // change the state.
     tree.setProps({defaultValue: weekLater});
@@ -57,6 +59,7 @@ describe('Calendar', () => {
 
     // Changing value will change the state
     tree.setProps({value: weekLater});
+
     assert.deepEqual(+tree.state('value'), +weekLater);
 
     // Component interaction should not change the state, only manually setting value
@@ -80,6 +83,7 @@ describe('Calendar', () => {
 
   it('supports valueFormat', () => {
     const tree = shallow(<Calendar value="08-01-2016" valueFormat="MM-DD-YYYY" />);
+    tree.instance().componentWillMount();
     assert.equal(+tree.state('value'), +new Date(2016, 7, 1));
     tree.setProps({value: '01-08-2016'});
     assert.equal(+tree.state('value'), +new Date(2016, 0, 8));
@@ -89,6 +93,7 @@ describe('Calendar', () => {
     const start = moment(new Date(2016, 7, 1));
     const end = moment(new Date(2016, 7, 5));
     const tree = shallow(<Calendar selectionType="range" value={[start, end]} />);
+    tree.instance().componentWillMount();
     assert.deepEqual(tree.state('value'), new DateRange(start, end));
   });
 
@@ -96,6 +101,7 @@ describe('Calendar', () => {
     const start = moment(new Date(2016, 7, 1));
     const end = moment(new Date(2016, 7, 5));
     const tree = shallow(<Calendar selectionType="range" defaultValue={[start, end]} />);
+    tree.instance().componentWillMount();
     assert.deepEqual(tree.state('value'), new DateRange(start, end));
 
     const weekLater = new DateRange(start.clone().add(1, 'week'), end.clone().add(1, 'week'));
@@ -114,6 +120,7 @@ describe('Calendar', () => {
     const start = moment(new Date(2016, 7, 1));
     const end = moment(new Date(2016, 7, 5));
     const tree = shallow(<Calendar selectionType="range" value={[start, end]} />);
+    tree.instance().componentWillMount();
     assert.deepEqual(tree.state('value'), new DateRange(start, end));
 
     const weekLater = new DateRange(start.clone().add(1, 'week'), end.clone().add(1, 'week'));
@@ -218,6 +225,7 @@ describe('Calendar', () => {
       now = moment().startOf('day');
       preventDefaultSpy = sinon.spy();
       tree = shallow(<Calendar value={now} />);
+      tree.instance().componentWillMount();
       body = findBody(tree);
     });
 
@@ -255,17 +263,20 @@ describe('Calendar', () => {
     it('is set to value if it exists', () => {
       const date = '2015-01-01';
       tree = shallow(<Calendar value={date} />);
+      tree.instance().componentWillMount();
       assert.equal(+tree.state('focusedDate'), +moment(date, DEFAULT_VALUE_FORMAT));
     });
 
     it('is set to defaultValue if it exists', () => {
       const date = '2015-01-01';
       tree = shallow(<Calendar defaultValue={date} />);
+      tree.instance().componentWillMount();
       assert.equal(+tree.state('focusedDate'), +moment(date, DEFAULT_VALUE_FORMAT));
     });
 
     it('is set to now if no value or defaultValue exist', () => {
       tree = shallow(<Calendar />);
+      tree.instance().componentWillMount();
       assert.equal(tree.state('focusedDate').isSame(now, 'day'), true);
     });
   });
@@ -307,6 +318,7 @@ describe('Calendar', () => {
     const minDate = moment(new Date(2016, 9, 24, 12, 30));
     const maxDate = minDate.clone().add(3, 'day');
     const tree = shallow(<Calendar min={minDate} max={maxDate} />);
+    tree.instance().componentWillMount();
     assert.equal(+tree.state('min'), +minDate.startOf('day'));
     assert.equal(+tree.state('max'), +maxDate.startOf('day'));
 
@@ -321,6 +333,8 @@ describe('Calendar', () => {
     const date = moment('2015-01-01', DEFAULT_VALUE_FORMAT);
     const oneWeekLater = date.clone().add(1, 'week');
     const tree = shallow(<Calendar value={date} min={date} max={oneWeekLater} />);
+    tree.instance().componentWillMount();
+    tree.update();
     assert.equal(findAllSelectableCells(tree).length, 8); // includes start and end days
   });
 
@@ -345,7 +359,7 @@ describe('Calendar', () => {
       let cellTree, dateNode;
 
       beforeEach(() => {
-        cellTree = shallow(findFocusedCell(tree).node);
+        cellTree = shallow(findFocusedCell(tree).getElement());
         dateNode = cellTree.find('.spectrum-Calendar-date');
       });
 
@@ -370,9 +384,9 @@ describe('Calendar', () => {
         const end = moment(new Date(2016, 7, 5));
         const tree = shallow(<Calendar selectionType="range" value={[start, end]} />);
 
-        const startCell = shallow(findCellByDate(tree, start).node).find('span');
-        const midCell = shallow(findCellByDate(tree, start.clone().add(1, 'day')).node).find('span');
-        const endCell = shallow(findCellByDate(tree, end).node).find('span');
+        const startCell = shallow(findCellByDate(tree, start).getElement()).find('span');
+        const midCell = shallow(findCellByDate(tree, start.clone().add(1, 'day')).getElement()).find('span');
+        const endCell = shallow(findCellByDate(tree, end).getElement()).find('span');
 
         assert.equal(startCell.hasClass('is-range-selection'), true);
         assert.equal(startCell.hasClass('is-range-start'), true);
@@ -397,7 +411,7 @@ describe('Calendar', () => {
           .endOf('month')
           .add(1, 'day')
           .startOf('day');
-        cellTree = shallow(findCellByDate(tree, startOfNextMonth).node);
+        cellTree = shallow(findCellByDate(tree, startOfNextMonth).getElement());
         dateNode = cellTree.find('.spectrum-Calendar-date');
       });
 
@@ -451,6 +465,7 @@ describe('Calendar', () => {
   });
 });
 
+
 const findHeaderTitle = tree => tree.find('.spectrum-Calendar-header').childAt(0);
 const findPreviousButton = tree => tree.find('.spectrum-Calendar-header').childAt(1);
 const findNextButton = tree => tree.find('.spectrum-Calendar-header').childAt(2);
diff --git a/packages/react-spectrum/test/Datepicker/Datepicker.js b/packages/react-spectrum/test/Datepicker/Datepicker.js
index a4c18b3d..20994586 100644
--- a/packages/react-spectrum/test/Datepicker/Datepicker.js
+++ b/packages/react-spectrum/test/Datepicker/Datepicker.js
@@ -50,18 +50,18 @@ describe('Datepicker', () => {
   it('supports type (date, time, and datetime)', () => {
     const tree = shallow(<Datepicker type="date" />);
 
-    assert(tree.find(Calendar).node);
-    assert(!tree.find(Clock).node);
+    assert.equal(tree.find(Calendar).length, 1);
+    assert.equal(tree.find(Clock).length, 0);
     assert.equal(findButton(tree).prop('icon'), 'calendar');
 
     tree.setProps({type: 'datetime'});
-    assert(tree.find(Calendar).node);
-    assert(tree.find(Clock).node);
+    assert.equal(tree.find(Calendar).length, 1);
+    assert.equal(tree.find(Clock).length, 1);
     assert.equal(findButton(tree).prop('icon'), 'calendar');
 
     tree.setProps({type: 'time'});
-    assert(!tree.find(Calendar).node);
-    assert(tree.find(Clock).node);
+    assert.equal(tree.find(Calendar).length, 0);
+    assert.equal(tree.find(Clock).length, 1);
     assert.equal(findButton(tree).prop('icon'), 'clock');
   });
 
@@ -187,7 +187,7 @@ describe('Datepicker', () => {
       const date = new Date(2001, 0, 1);
 
       const changeTimeAndGetNewDate = (wrapper, value, field) => {
-        const clockEl = shallow(wrapper.find(Clock).node).find(`.react-spectrum-Clock-${field}`);
+        const clockEl = shallow(wrapper.find(Clock).getElement()).find(`.react-spectrum-Clock-${field}`);
         clockEl.simulate('change', value, {stopPropagation: function () {}, target: {value: `${value}`}});
         return spy.lastCall.args[1];
       };
diff --git a/packages/react-spectrum/test/Grid/Grid.js b/packages/react-spectrum/test/Grid/Grid.js
index 49d68928..fb40b734 100644
--- a/packages/react-spectrum/test/Grid/Grid.js
+++ b/packages/react-spectrum/test/Grid/Grid.js
@@ -16,7 +16,7 @@ describe('Grid', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 
   it('supports fixed variant', () => {
diff --git a/packages/react-spectrum/test/Grid/GridColumn.js b/packages/react-spectrum/test/Grid/GridColumn.js
index a433ac19..43866ece 100644
--- a/packages/react-spectrum/test/Grid/GridColumn.js
+++ b/packages/react-spectrum/test/Grid/GridColumn.js
@@ -16,7 +16,7 @@ describe('GridColumn', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 
   it('supports custom column size', () => {
diff --git a/packages/react-spectrum/test/Grid/GridRow.js b/packages/react-spectrum/test/Grid/GridRow.js
index f8e028e3..f7e7e29e 100644
--- a/packages/react-spectrum/test/Grid/GridRow.js
+++ b/packages/react-spectrum/test/Grid/GridRow.js
@@ -16,7 +16,7 @@ describe('GridRow', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 
   it('supports align start', () => {
diff --git a/packages/react-spectrum/test/Heading/Heading.js b/packages/react-spectrum/test/Heading/Heading.js
index 00c1cd51..740a1361 100644
--- a/packages/react-spectrum/test/Heading/Heading.js
+++ b/packages/react-spectrum/test/Heading/Heading.js
@@ -1,4 +1,3 @@
-
 import assert from 'assert';
 import Heading from '../../src/Heading';
 import React from 'react';
@@ -27,7 +26,7 @@ describe('Heading', () => {
 
   it('supports children', () => {
     const tree = shallow(<Heading>My Heading</Heading>);
-    assert.equal(tree.children().node, 'My Heading');
+    assert.equal(tree.childAt(0).text(), 'My Heading');
   });
 });
 
diff --git a/packages/react-spectrum/test/Link/Link.js b/packages/react-spectrum/test/Link/Link.js
index 309b87ba..9701766c 100644
--- a/packages/react-spectrum/test/Link/Link.js
+++ b/packages/react-spectrum/test/Link/Link.js
@@ -21,6 +21,6 @@ describe('Link', () => {
 
   it('supports children', () => {
     const tree = shallow(<Link>My Link</Link>);
-    assert.equal(tree.children().node, 'My Link');
+    assert.equal(tree.childAt(0).text(), 'My Link');
   });
 });
diff --git a/packages/react-spectrum/test/OverlayTrigger/Overlay.js b/packages/react-spectrum/test/OverlayTrigger/Overlay.js
index ef0f5d0c..dd253f01 100644
--- a/packages/react-spectrum/test/OverlayTrigger/Overlay.js
+++ b/packages/react-spectrum/test/OverlayTrigger/Overlay.js
@@ -18,7 +18,7 @@ describe('Overlay', () => {
   it('doesn\'t change render of an overlay if not showing', () => {
     const tree = shallow(<Overlay><span /></Overlay>);
     assert.equal(tree.state('exited'), true);
-    assert.equal(tree.node, null);
+    assert.equal(tree.getElement(), null);
   });
 
   it('renders a portal with the container prop', () => {
diff --git a/packages/react-spectrum/test/OverlayTrigger/Position.js b/packages/react-spectrum/test/OverlayTrigger/Position.js
index 67c9b04c..6d7f5c7b 100644
--- a/packages/react-spectrum/test/OverlayTrigger/Position.js
+++ b/packages/react-spectrum/test/OverlayTrigger/Position.js
@@ -16,7 +16,7 @@ describe('Position', () => {
   const target = ReactDOM.render(<Target />, container);
 
   it('passes props to child', () => {
-    const tree = shallow(<Position target={target}><div>test</div></Position>);
+    const tree = shallow(<Position target={target}><div>test</div></Position>, {disableLifecycleMethods: true});
     assert.equal(tree.type(), 'div');
     assert.deepEqual(tree.prop('style'), {
       position: 'absolute',
@@ -44,7 +44,7 @@ describe('Position', () => {
     const div = tree.find('div');
 
     assert(stub.calledOnce);
-    assert.deepEqual(stub.getCall(0).args, ['bottom', ReactDOM.findDOMNode(tree.getNode()), ReactDOM.findDOMNode(target), document.body, 15]);
+    assert.deepEqual(stub.getCall(0).args, ['bottom', ReactDOM.findDOMNode(tree.instance()), ReactDOM.findDOMNode(target), document.body, 15]);
 
     assert.deepEqual(div.prop('style'), {
       position: 'absolute',
@@ -82,10 +82,11 @@ describe('Position', () => {
     });
 
     tree.setProps({placement: 'left'});
+    tree.update();
     const div = tree.find('div');
 
     assert(stub.calledTwice);
-    assert.deepEqual(stub.getCall(1).args, ['left', ReactDOM.findDOMNode(tree.getNode()), ReactDOM.findDOMNode(target), document.body, 10]);
+    assert.deepEqual(stub.getCall(1).args, ['left', ReactDOM.findDOMNode(tree.instance()), ReactDOM.findDOMNode(target), document.body, 10]);
 
     assert.deepEqual(div.prop('style'), {
       position: 'absolute',
@@ -125,10 +126,11 @@ describe('Position', () => {
     let event = document.createEvent('Event');
     event.initEvent('resize', false, false);
     window.dispatchEvent(event);
+    tree.update(); // update after event dispatch
 
     const div = tree.find('div');
     assert(stub.calledTwice);
-    assert.deepEqual(stub.getCall(1).args, ['bottom', ReactDOM.findDOMNode(tree.getNode()), ReactDOM.findDOMNode(target), document.body, 10]);
+    assert.deepEqual(stub.getCall(1).args, ['bottom', ReactDOM.findDOMNode(tree.instance()), ReactDOM.findDOMNode(target), document.body, 10]);
 
     assert.deepEqual(div.prop('style'), {
       position: 'absolute',
diff --git a/packages/react-spectrum/test/OverlayTrigger/calculatePosition.js b/packages/react-spectrum/test/OverlayTrigger/calculatePosition.js
index e6b6077a..5de34887 100644
--- a/packages/react-spectrum/test/OverlayTrigger/calculatePosition.js
+++ b/packages/react-spectrum/test/OverlayTrigger/calculatePosition.js
@@ -2,7 +2,6 @@ import assert from 'assert';
 import {calculatePositionInternal} from '../../src/OverlayTrigger/js/calculatePosition';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-dom/test-utils';
 
 describe('calculatePosition', function () {
   function checkPosition(placement, targetPosition, expected) {
diff --git a/packages/react-spectrum/test/PortalContainer/PortalContainer.js b/packages/react-spectrum/test/PortalContainer/PortalContainer.js
index 3b9c2ace..3ffa03a0 100644
--- a/packages/react-spectrum/test/PortalContainer/PortalContainer.js
+++ b/packages/react-spectrum/test/PortalContainer/PortalContainer.js
@@ -10,11 +10,14 @@ describe('PortalContainer', () => {
 
     let child = <div key="test">test</div>;
     tree.instance().add(child);
+    tree.update();
+
     assert.equal(tree.children().length, 1);
     assert.equal(tree.childAt(0).text(), 'test');
 
     let child2 = <div key="test2">test2</div>;
     tree.instance().add(child2);
+    tree.update();
     assert.equal(tree.children().length, 2);
     assert.equal(tree.childAt(0).text(), 'test');
     assert.equal(tree.childAt(1).text(), 'test2');
@@ -22,12 +25,13 @@ describe('PortalContainer', () => {
     // update child
     child = <div key="test">testing</div>;
     tree.instance().add(child);
+    tree.update();
     assert.equal(tree.children().length, 2);
     assert.equal(tree.childAt(0).text(), 'testing');
     assert.equal(tree.childAt(1).text(), 'test2');
 
     tree.instance().remove(child);
-    assert.equal(tree.children().length, 1);
+    assert.equal(tree.children().length, 2);
   });
 
   it('should render a global PortalContainer', async () => {
diff --git a/packages/react-spectrum/test/Progress/Progress.js b/packages/react-spectrum/test/Progress/Progress.js
index 4e984c6d..e9d588c2 100644
--- a/packages/react-spectrum/test/Progress/Progress.js
+++ b/packages/react-spectrum/test/Progress/Progress.js
@@ -19,7 +19,7 @@ describe('Progress', () => {
     assert.equal(status.prop('className'), 'spectrum-Progress-status');
     assert.deepEqual(status.prop('style'), {width: '0%'});
 
-    assert(!tree.find('.spectrum-Progress-label').node);
+    assert(!tree.find('.spectrum-Progress-label').length);
   });
 
   describe('value', () => {
@@ -64,7 +64,7 @@ describe('Progress', () => {
       const tree = shallow(<Progress showPercent />);
       assert.equal(tree.hasClass('spectrum-Progress--rightLabel'), true);
       const label = findLabel(tree);
-      assert(label.node);
+      assert(label.getElement());
       assert.equal(label.text(), '0%');
 
       tree.setProps({value: 50});
diff --git a/packages/react-spectrum/test/Search/Search.js b/packages/react-spectrum/test/Search/Search.js
index 764cd162..2b2eadeb 100644
--- a/packages/react-spectrum/test/Search/Search.js
+++ b/packages/react-spectrum/test/Search/Search.js
@@ -18,7 +18,7 @@ describe('Search', () => {
     assert.equal(input.hasClass('spectrum-Search-input'), true);
 
     const button = findButton(tree);
-    assert(!button.node);
+    assert(!button.length);
   });
 
   it('should support custom icons', () => {
@@ -30,7 +30,7 @@ describe('Search', () => {
   it('should support no icon', () => {
     const tree = shallow(<Search icon="" />);
     const icon = tree.find('.spectrum-DecoratedTextfield-icon');
-    assert(!icon.node);
+    assert(!icon.length);
   });
 
   it('shows clear button if text exists', () => {
diff --git a/packages/react-spectrum/test/Shell/ShellOrgSwitcher.js b/packages/react-spectrum/test/Shell/ShellOrgSwitcher.js
index f9438f43..fd54a914 100644
--- a/packages/react-spectrum/test/Shell/ShellOrgSwitcher.js
+++ b/packages/react-spectrum/test/Shell/ShellOrgSwitcher.js
@@ -33,6 +33,7 @@ describe('ShellOrgSwitcher', () => {
 
     const changeSearchTerm = (searchTerm) => {
       tree.instance().handleSearchChange(searchTerm);
+      tree.update();
       noResultsContainer = findNoResultsContainer(tree);
       selectList = findSelectList(tree);
     };
diff --git a/packages/react-spectrum/test/Switch/SwitchBase.js b/packages/react-spectrum/test/Switch/SwitchBase.js
index dbf21c2a..98988f4a 100644
--- a/packages/react-spectrum/test/Switch/SwitchBase.js
+++ b/packages/react-spectrum/test/Switch/SwitchBase.js
@@ -23,7 +23,7 @@ describe('SwitchBase', () => {
     assert.equal(checkmark.prop('className'), 'coral-Foo-checkmark');
     const label = findLabel(tree, 'Foo');
     assert.equal(label.prop('className'), 'coral-Foo-description');
-    assert.equal(label.children().node, 'React');
+    assert.equal(label.children().text(), 'React');
   });
 
   it('uncontrolled switchBase will toggle', () => {
@@ -108,30 +108,30 @@ describe('SwitchBase', () => {
         labelClassName="coral-Foo-description"
         renderLabel={false} />
     );
-    assert(!findLabel(tree).node);
+    assert(!findLabel(tree).length);
     tree.setProps({renderLabel: true});
     tree.setProps({label: 'React'});
-    assert(findLabel(tree).node);
+    assert(findLabel(tree).length);
   });
 
   it('supports overriding the input className', () => {
     const tree = shallow(<SwitchBase inputClassName="my-input-class" />);
     const input = tree.find('.my-input-class');
-    assert(input.node);
+    assert(input.getElement());
     assert.equal(input.type(), 'input');
   });
 
   it('supports overriding the mark className', () => {
     const tree = shallow(<SwitchBase markClassName="my-mark-class" />);
     const mark = tree.find('.my-mark-class');
-    assert(mark.node);
+    assert(mark.getElement());
     assert.equal(mark.type(), 'span');
   });
 
   it('supports overriding the label className', () => {
     const tree = shallow(<SwitchBase labelClassName="my-label-class" label="React" />);
     const mark = tree.find('.my-label-class');
-    assert(mark.node);
+    assert(mark.getElement());
     assert.equal(mark.type(), 'label');
   });
 });
diff --git a/packages/react-spectrum/test/TabList/TabList.js b/packages/react-spectrum/test/TabList/TabList.js
index 697cd7ad..5ce7bb5e 100644
--- a/packages/react-spectrum/test/TabList/TabList.js
+++ b/packages/react-spectrum/test/TabList/TabList.js
@@ -1,12 +1,12 @@
 import assert from 'assert';
-import {mount, shallow} from 'enzyme';
 import React from 'react';
+import {shallow} from 'enzyme';
 import sinon from 'sinon';
 import {TabList} from '../../src/TabList';
 
 describe('TabList', () => {
   it('has correct defaults', () => {
-    const tree = shallow(<TabList />);
+    const tree = shallow(<TabList />, {disableLifecycleMethods: true});
     const innerTree = tree.shallow();
     assert.equal(tree.prop('className'), 'spectrum-TabList spectrum-TabList--horizontal spectrum-TabList--panel');
     assert.equal(innerTree.type(), 'div');
@@ -14,40 +14,40 @@ describe('TabList', () => {
   });
 
   it('supports large size', () => {
-    const tree = shallow(<TabList size="L" />);
+    const tree = shallow(<TabList size="L" />, {disableLifecycleMethods: true});
     assert.equal(tree.prop('className'), 'spectrum-TabList spectrum-TabList--large spectrum-TabList--horizontal spectrum-TabList--panel');
   });
 
   it('supports vertical orientation', () => {
-    const tree = shallow(<TabList orientation="vertical" />);
+    const tree = shallow(<TabList orientation="vertical" />, {disableLifecycleMethods: true});
     assert.equal(tree.prop('className'), 'spectrum-TabList spectrum-TabList--vertical spectrum-TabList--panel');
   });
 
   it('supports anchored variant', () => {
-    const tree = shallow(<TabList variant="anchored" />);
+    const tree = shallow(<TabList variant="anchored" />, {disableLifecycleMethods: true});
     assert.equal(tree.prop('className'), 'spectrum-TabList spectrum-TabList--horizontal spectrum-TabList--anchored');
   });
 
   it('supports page variant', () => {
-    const tree = shallow(<TabList variant="page" />);
+    const tree = shallow(<TabList variant="page" />, {disableLifecycleMethods: true});
     assert.equal(tree.prop('className'), 'spectrum-TabList spectrum-TabList--horizontal spectrum-TabList--page');
   });
 
   it('supports additional classNames', () => {
-    const tree = shallow(<TabList className="myClass" />);
+    const tree = shallow(<TabList className="myClass" />, {disableLifecycleMethods: true});
     assert.equal(tree.prop('className'), 'spectrum-TabList spectrum-TabList--horizontal spectrum-TabList--panel myClass');
   });
 
   it('supports additional properties', () => {
-    const tree = shallow(<TabList foo />);
+    const tree = shallow(<TabList foo />, {disableLifecycleMethods: true});
     assert.equal(tree.prop('foo'), true);
   });
 
   it('supports children', () => {
-    const tree = shallow(<TabList><div className="someContent">My Custom Content</div></TabList>);
+    const tree = shallow(<TabList><div className="someContent">My Custom Content</div></TabList>, {disableLifecycleMethods: true});
     const child = tree.find('.someContent');
     assert.equal(child.length, 1);
-    assert.equal(child.children().node, 'My Custom Content');
+    assert.equal(child.children().text(), 'My Custom Content');
   });
 
   it('can be changed', () => {
@@ -56,7 +56,7 @@ describe('TabList', () => {
       <TabList onChange={spy}>
         <div className="one">a</div>
         <div className="two">b</div>
-      </TabList>
+      </TabList>, {disableLifecycleMethods: true}
     );
     const innerTree = tree.shallow();
 
@@ -71,13 +71,13 @@ describe('TabList', () => {
       <TabList selectedIndex={index}>
         <div className="one">a</div>
         <div className="two">b</div>
-      </TabList>
+      </TabList>, {disableLifecycleMethods: true}
     );
 
     const assertChildTwoSelected = tree => {
       const child = tree.find('[selected=true]');
       assert.equal(child.length, 1);
-      assert.equal(child.node.props.className, 'two');
+      assert.equal(child.prop('className'), 'two');
     };
 
     it('supports string index', () => {
@@ -99,24 +99,22 @@ describe('TabList', () => {
       <TabList defaultSelectedIndex="1">
         <div className="one">a</div>
         <div className="two">b</div>
-      </TabList>
+      </TabList>, {disableLifecycleMethods: true}
     );
     const innerTree = tree.shallow();
     const child = innerTree.find('[selected=true]');
 
     assert.equal(child.length, 1);
-    assert.equal(child.node.props.className, 'two');
+    assert.equal(child.prop('className'), 'two');
   });
 
   it('does not call onChange if descendant input is changed', () => {
     const onChange = sinon.spy();
 
-    // We need to use mount instead of shallow because we need our simulated change event to
-    // bubble to properly test the scenario. Simulated events don't bubble when rendering shallowly.
-    const tree = mount(
+    const tree = shallow(
       <TabList defaultSelectedIndex="0" onChange={onChange}>
         <div>a <input type="checkbox" /></div>
-      </TabList>
+      </TabList>, {disableLifecycleMethods: true}
     );
 
     tree.find('input').simulate('change');
diff --git a/packages/react-spectrum/test/Table/TBody.js b/packages/react-spectrum/test/Table/TBody.js
index 8e8f78e0..5352dd2c 100644
--- a/packages/react-spectrum/test/Table/TBody.js
+++ b/packages/react-spectrum/test/Table/TBody.js
@@ -16,7 +16,7 @@ describe('TBody', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 });
 
diff --git a/packages/react-spectrum/test/Table/TD.js b/packages/react-spectrum/test/Table/TD.js
index fceddf12..0d3f169c 100644
--- a/packages/react-spectrum/test/Table/TD.js
+++ b/packages/react-spectrum/test/Table/TD.js
@@ -16,7 +16,7 @@ describe('TD', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 });
 
diff --git a/packages/react-spectrum/test/Table/TH.js b/packages/react-spectrum/test/Table/TH.js
index afd52fcc..432eb32d 100644
--- a/packages/react-spectrum/test/Table/TH.js
+++ b/packages/react-spectrum/test/Table/TH.js
@@ -16,7 +16,7 @@ describe('TH', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 });
 
diff --git a/packages/react-spectrum/test/Table/THead.js b/packages/react-spectrum/test/Table/THead.js
index 58101c93..1a67d90f 100644
--- a/packages/react-spectrum/test/Table/THead.js
+++ b/packages/react-spectrum/test/Table/THead.js
@@ -17,7 +17,7 @@ describe('THead', () => {
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
     assert.equal(tree.children().type(), 'tr');
-    assert.equal(tree.children().children().node, 'Foo');
+    assert.equal(tree.children().children().text(), 'Foo');
   });
 });
 
diff --git a/packages/react-spectrum/test/Table/TR.js b/packages/react-spectrum/test/Table/TR.js
index 4af92418..f35b7d82 100644
--- a/packages/react-spectrum/test/Table/TR.js
+++ b/packages/react-spectrum/test/Table/TR.js
@@ -16,7 +16,7 @@ describe('TR', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 });
 
diff --git a/packages/react-spectrum/test/Table/Table.js b/packages/react-spectrum/test/Table/Table.js
index 729caf09..8fa5a0ba 100644
--- a/packages/react-spectrum/test/Table/Table.js
+++ b/packages/react-spectrum/test/Table/Table.js
@@ -21,7 +21,7 @@ describe('Table', () => {
 
   it('supports children', () => {
     const tree = shallow(render({children: 'Foo'}));
-    assert.equal(tree.children().node, 'Foo');
+    assert.equal(tree.childAt(0).text(), 'Foo');
   });
 });
 
diff --git a/packages/react-spectrum/test/TagList/Tag.js b/packages/react-spectrum/test/TagList/Tag.js
index 11fff902..c28d8e4d 100644
--- a/packages/react-spectrum/test/TagList/Tag.js
+++ b/packages/react-spectrum/test/TagList/Tag.js
@@ -25,7 +25,7 @@ describe('Tag', () => {
 
   it('supports being closable', () => {
     const tree = shallow(<Tag closable={false} />);
-    assert(!tree.find('.spectrum-Tag-removeButton').node);
+    assert(!tree.find('.spectrum-Tag-removeButton').length);
   });
 
   it('supports being disabled', () => {
@@ -72,12 +72,12 @@ describe('Tag', () => {
 
   it('supports an icon', () => {
     const tree = shallow(<Tag icon="camera" />);
-    assert(tree.find('.spectrum-Tag-icon').node);
+    assert(tree.find('.spectrum-Tag-icon').length);
   });
 
   it('supports an avatar', () => {
     const tree = shallow(<Tag avatar="https://www.botlibre.com/media/a12832214.png" />);
-    assert(tree.find('.spectrum-Tag-avatar').node);
+    assert(tree.find('.spectrum-Tag-avatar').length);
   });
 
 });
diff --git a/packages/react-spectrum/test/TagList/TagList.js b/packages/react-spectrum/test/TagList/TagList.js
index c3d0934b..9617ee48 100644
--- a/packages/react-spectrum/test/TagList/TagList.js
+++ b/packages/react-spectrum/test/TagList/TagList.js
@@ -129,7 +129,7 @@ describe('TagList', () => {
     it('passes down the onClose', () => {
       const onClose = sinon.spy();
       run({onClose});
-      child1.props().onClose('Tag 1');
+      child1.prop('onClose')('Tag 1');
       assert(onClose.calledWith('Tag 1'));
     });
 
diff --git a/packages/react-spectrum/test/Toast/ToastContainer.js b/packages/react-spectrum/test/Toast/ToastContainer.js
index 2b949e1b..921c5ecd 100644
--- a/packages/react-spectrum/test/Toast/ToastContainer.js
+++ b/packages/react-spectrum/test/Toast/ToastContainer.js
@@ -20,9 +20,11 @@ describe('ToastContainer', () => {
 
     const toast = <Toast>Test</Toast>;
     tree.instance().add(toast);
+    tree.update();
     assert.equal(tree.children().length, 1);
 
     tree.instance().remove(toast);
+    tree.update();
     assert.equal(tree.children().length, 0);
 
     cleanup();
@@ -33,9 +35,11 @@ describe('ToastContainer', () => {
     assert.equal(tree.children().length, 0);
 
     tree.instance().add(<Toast>Test</Toast>, 5);
+    tree.update();
     assert.equal(tree.children().length, 1);
 
     await sleep(6);
+    tree.update();
     assert.equal(tree.children().length, 0);
 
     cleanup();
@@ -46,9 +50,11 @@ describe('ToastContainer', () => {
     assert.equal(tree.children().length, 0);
 
     tree.instance().add(<Toast>Test</Toast>, 5);
+    tree.update();
     assert.equal(tree.children().length, 1);
 
     tree.find(Toast).simulate('close');
+    tree.update();
     assert.equal(tree.children().length, 0);
 
     cleanup();
diff --git a/packages/react-spectrum/test/Well/Well.js b/packages/react-spectrum/test/Well/Well.js
index 6cb0d24c..7812f9bb 100644
--- a/packages/react-spectrum/test/Well/Well.js
+++ b/packages/react-spectrum/test/Well/Well.js
@@ -16,6 +16,6 @@ describe('Well', () => {
 
   it('supports children', () => {
     const tree = shallow(<Well>My Well</Well>);
-    assert.equal(tree.children().node, 'My Well');
+    assert.equal(tree.childAt(0).text(), 'My Well');
   });
 });