From b3a2c8455603e6a8de0c8f06e12025e270ecbc6e Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Mon, 27 Jan 2020 16:53:48 -0600
Subject: [PATCH] chore(project): add setup for test failure with unexpected
 console (#5184)

* chore(project): add setup for test failure with unexpected console

* chore(components): update timeout for styles-test.js

* test(checkbox): add missing required props

* test(data-table): add missing or required props

* test(ui-shell): update tests and add missing props

* test(overflow-menu): add missing props

* test(number-input): skip test with invalid prop

* test(date-picker): update mocks of console.error

* test(tag): add missing props

* Update packages/components/tests/styles-test.js

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 packages/components/tests/styles-test.js      |  2 +-
 .../src/components/Checkbox/Checkbox-test.js  |  9 ++-
 .../DataTable/__tests__/DataTable-test.js     |  7 ++-
 .../__tests__/TableBatchAction-test.js        |  6 +-
 .../__tests__/TableExpandHeader-test.js       |  7 ++-
 .../__tests__/TableExpandRow-test.js          |  8 +--
 .../__tests__/TableToolbarMenu-test.js        |  9 ++-
 .../__snapshots__/DataTable-test.js.snap      |  8 +--
 .../TableBatchAction-test.js.snap             |  8 ++-
 .../TableExpandHeader-test.js.snap            |  3 +
 .../__snapshots__/TableExpandRow-test.js.snap | 12 +++-
 .../components/DatePicker/DatePicker-test.js  | 19 ++++++-
 .../NumberInput/NumberInput-test.js           |  3 +-
 .../OverflowMenu/OverflowMenu-test.js         | 19 ++++---
 .../OverflowMenuItem/OverflowMenuItem-test.js |  3 +-
 packages/react/src/components/Tag/Tag-test.js | 10 +++-
 .../UIShell/__tests__/SideNavFooter-test.js   |  2 +-
 .../UIShell/__tests__/SideNavItems-test.js    |  4 +-
 .../UIShell/__tests__/SideNavMenu-test.js     | 20 +++++--
 .../__snapshots__/SideNavFooter-test.js.snap  |  3 +-
 .../__snapshots__/SideNavItems-test.js.snap   | 10 +++-
 tasks/jest/setupAfterEnv.js                   | 56 +++++++++++++++++++
 22 files changed, 177 insertions(+), 51 deletions(-)

diff --git a/packages/components/tests/styles-test.js b/packages/components/tests/styles-test.js
index 7660f3eb8de8..642def1aa5d7 100644
--- a/packages/components/tests/styles-test.js
+++ b/packages/components/tests/styles-test.js
@@ -22,7 +22,7 @@ const files = glob.sync('**/*.scss', {
 const render = promisify(sass.render);
 
 describe('styles', () => {
-  jest.setTimeout(8000);
+  jest.setTimeout(20000);
   it.each(files)('%s should compile', async relativeFilePath => {
     const filepath = path.join(cwd, relativeFilePath);
     try {
diff --git a/packages/react/src/components/Checkbox/Checkbox-test.js b/packages/react/src/components/Checkbox/Checkbox-test.js
index abdd198c4e9c..f1d257704396 100644
--- a/packages/react/src/components/Checkbox/Checkbox-test.js
+++ b/packages/react/src/components/Checkbox/Checkbox-test.js
@@ -144,7 +144,14 @@ describe('refs', () => {
         this.myRef = React.createRef();
       }
       render() {
-        return <Checkbox indeterminate ref={this.myRef} />;
+        return (
+          <Checkbox
+            id="test-id"
+            labelText="test"
+            indeterminate
+            ref={this.myRef}
+          />
+        );
       }
     }
     const wrapper = mount(<MyComponent />);
diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
index e042bc7f96d2..324f55ec14cc 100644
--- a/packages/react/src/components/DataTable/__tests__/DataTable-test.js
+++ b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
@@ -113,7 +113,7 @@ describe('DataTable', () => {
                     Action 3
                   </TableToolbarAction>
                 </TableToolbarMenu>
-                <Button onClick={jest.fn()} small kind="primary">
+                <Button onClick={jest.fn()} size="small" kind="primary">
                   Add new
                 </Button>
               </TableToolbarContent>
@@ -400,7 +400,7 @@ describe('DataTable', () => {
                       Action 3
                     </TableToolbarAction>
                   </TableToolbarMenu>
-                  <Button onClick={jest.fn()} small kind="primary">
+                  <Button onClick={jest.fn()} size="small" kind="primary">
                     Add new
                   </Button>
                 </TableToolbarContent>
@@ -689,6 +689,7 @@ describe('DataTable', () => {
             rows,
             headers,
             getHeaderProps,
+            getExpandHeaderProps,
             getSelectionProps,
             getBatchActionProps,
             getRowProps,
@@ -704,7 +705,7 @@ describe('DataTable', () => {
               <Table>
                 <TableHead>
                   <TableRow>
-                    <TableExpandHeader />
+                    <TableExpandHeader {...getExpandHeaderProps()} />
                     <TableSelectAll {...getSelectionProps()} />
                     {headers.map(header => (
                       <TableHeader {...getHeaderProps({ header })}>
diff --git a/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js b/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js
index afd58a564609..79bf7c9ff602 100644
--- a/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js
@@ -11,7 +11,9 @@ import { TableBatchAction } from '../';
 
 describe('DataTable.TableBatchAction', () => {
   it('should render', () => {
-    const wrapper = mount(<TableBatchAction className="custom-class" />);
+    const wrapper = mount(
+      <TableBatchAction className="custom-class" iconDescription="test" />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -21,7 +23,7 @@ describe('DataTable.TableBatchAction', () => {
         <circle cx="16" cy="16" r="8" />
       </svg>
     ));
-    mount(<TableBatchAction renderIcon={renderIcon} />);
+    mount(<TableBatchAction iconDescription="test" renderIcon={renderIcon} />);
     expect(renderIcon).toHaveBeenCalled();
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js
index b19d0d5a9bcb..065a8ff1f189 100644
--- a/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js
@@ -15,7 +15,12 @@ describe('DataTable.TableExpandHeader', () => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableExpandHeader className="custom-class" />
+            <TableExpandHeader
+              ariaLabel="test-label"
+              isExpanded={false}
+              onExpand={jest.fn()}
+              className="custom-class"
+            />
           </TableRow>
         </TableHead>
       </Table>
diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
index 9ef0271bec98..224f43560dcd 100644
--- a/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
@@ -26,7 +26,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
@@ -38,7 +38,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
@@ -63,7 +63,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
@@ -74,7 +74,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} isExpanded />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
index f03bac6b52b5..f93268df9952 100644
--- a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
@@ -16,8 +16,9 @@ describe('DataTable.TableToolbarMenu', () => {
       <TableToolbarMenu
         className="custom-class"
         renderIcon={Download16}
-        iconDescription="Add"
-      />
+        iconDescription="Add">
+        <span>test</span>
+      </TableToolbarMenu>
     );
     expect(wrapper).toMatchSnapshot();
   });
@@ -26,7 +27,9 @@ describe('DataTable.TableToolbarMenu', () => {
 describe('Custom icon in DataTable.TableToolbarMenu', () => {
   it('should render', () => {
     const iconAction = mount(
-      <TableToolbarMenu renderIcon={Download16} iconDescription="Download" />
+      <TableToolbarMenu renderIcon={Download16} iconDescription="Download">
+        <span>test</span>
+      </TableToolbarMenu>
     );
     const originalIcon = mount(<Download16 />).find('svg');
     const icon = iconAction.find('svg');
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index c8d73a27a9b5..8d3d08bae1b7 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1851,7 +1851,7 @@ exports[`DataTable should render 1`] = `
                   disabled={false}
                   kind="primary"
                   onClick={[MockFunction]}
-                  small={true}
+                  size="small"
                   tabIndex={0}
                   type="button"
                 >
@@ -2456,7 +2456,7 @@ exports[`DataTable should render 1`] = `
                 disabled={false}
                 kind="primary"
                 onClick={[MockFunction]}
-                small={true}
+                size="small"
                 tabIndex={0}
                 type="button"
               >
@@ -2830,7 +2830,7 @@ exports[`DataTable sticky header should render 1`] = `
                   disabled={false}
                   kind="primary"
                   onClick={[MockFunction]}
-                  small={true}
+                  size="small"
                   tabIndex={0}
                   type="button"
                 >
@@ -3438,7 +3438,7 @@ exports[`DataTable sticky header should render 1`] = `
                 disabled={false}
                 kind="primary"
                 onClick={[MockFunction]}
-                small={true}
+                size="small"
                 tabIndex={0}
                 type="button"
               >
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
index 7a10c18a6d88..6fcfa03bbf0d 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableBatchAction should render 1`] = `
 <TableBatchAction
   className="custom-class"
+  iconDescription="test"
   renderIcon={
     Object {
       "$$typeof": Symbol(react.forward_ref),
@@ -13,6 +14,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
   <ForwardRef(Button)
     className="custom-class"
     disabled={false}
+    iconDescription="test"
     kind="primary"
     renderIcon={
       Object {
@@ -31,10 +33,12 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     >
       <ForwardRef(AddFilled16)
         aria-hidden="true"
+        aria-label="test"
         className="bx--btn__icon"
       >
         <Icon
           aria-hidden="true"
+          aria-label="test"
           className="bx--btn__icon"
           height={16}
           preserveAspectRatio="xMidYMid meet"
@@ -43,11 +47,13 @@ exports[`DataTable.TableBatchAction should render 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <svg
-            aria-hidden={true}
+            aria-hidden="true"
+            aria-label="test"
             className="bx--btn__icon"
             focusable="false"
             height={16}
             preserveAspectRatio="xMidYMid meet"
+            role="img"
             style={
               Object {
                 "willChange": "transform",
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap
index ffdf64d9ade8..b0b4bb15e86a 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap
@@ -12,7 +12,10 @@ exports[`DataTable.TableExpandHeader should render 1`] = `
         <TableRow>
           <tr>
             <TableExpandHeader
+              ariaLabel="test-label"
               className="custom-class"
+              isExpanded={false}
+              onExpand={[MockFunction]}
             >
               <th
                 className="bx--table-expand custom-class"
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
index ed97da0ad34f..4d0ddc0a99fc 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
@@ -74,15 +74,21 @@ exports[`DataTable.TableExpandRow should render 1`] = `
             </TableCell>
           </tr>
         </TableExpandRow>
-        <TableExpandedRow>
+        <TableExpandedRow
+          colSpan={1}
+        >
           <tr
             className="bx--expandable-row"
             data-child-row={true}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
           >
-            <TableCell>
-              <td>
+            <TableCell
+              colSpan={1}
+            >
+              <td
+                colSpan={1}
+              >
                 <div
                   className="bx--child-row-inner-container"
                 />
diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
index db3dfdf6f5ee..ac518ecd8439 100644
--- a/packages/react/src/components/DatePicker/DatePicker-test.js
+++ b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -281,14 +281,19 @@ describe('DatePicker', () => {
   });
 
   describe('Date picker can be used with enzyme shallow', () => {
+    let spy;
     beforeEach(done => {
-      const spy = {};
+      spy = {};
       spy.console = jest.spyOn(console, 'error').mockImplementation(e => {
         done(e);
       });
       done();
     });
 
+    afterEach(() => {
+      spy.console.mockRestore();
+    });
+
     it('date picker should not throw exception when mounted or unmounted', () => {
       const wrapper = shallow(
         <DatePicker
@@ -318,7 +323,15 @@ describe('DatePicker', () => {
   });
 
   describe('Date picker with minDate and maxDate', () => {
-    console.error = jest.fn(); // eslint-disable-line no-console
+    let mockConsoleError;
+
+    beforeEach(() => {
+      mockConsoleError = jest.spyOn(console, 'error');
+    });
+
+    afterEach(() => {
+      mockConsoleError.mockRestore();
+    });
 
     const wrapper = mount(
       <DatePicker
@@ -351,7 +364,7 @@ describe('DatePicker', () => {
     });
 
     it('should not have "console.error" being created', () => {
-      expect(console.error).not.toBeCalled(); // eslint-disable-line no-console
+      expect(mockConsoleError).not.toBeCalled();
     });
   });
 });
diff --git a/packages/react/src/components/NumberInput/NumberInput-test.js b/packages/react/src/components/NumberInput/NumberInput-test.js
index 32bbe1b267c1..aa6c4cc2bc3c 100644
--- a/packages/react/src/components/NumberInput/NumberInput-test.js
+++ b/packages/react/src/components/NumberInput/NumberInput-test.js
@@ -236,7 +236,8 @@ describe('NumberInput', () => {
           );
         });
 
-        it('should avoid capping when non-number prop is given to value prop', () => {
+        // NumberInput propTypes do not allow a string to be passed
+        it.skip('should avoid capping when non-number prop is given to value prop', () => {
           // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
           wrapper
             .find('NumberInput')
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
index 704881e63c51..1864d60a1c7c 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import OverflowMenu from '../OverflowMenu';
+import OverflowMenuItem from '../OverflowMenuItem';
 import { OverflowMenuVertical16 } from '@carbon/icons-react';
 import { mount } from 'enzyme';
 import { settings } from 'carbon-components';
@@ -17,8 +18,8 @@ describe('OverflowMenu', () => {
   describe('Renders as expected', () => {
     const rootWrapper = mount(
       <OverflowMenu className="extra-class">
-        <div className="test-child" />
-        <div className="test-child" />
+        <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+        <OverflowMenuItem className="test-child">two</OverflowMenuItem>
       </OverflowMenu>
     );
     const menu = rootWrapper.find(`button.${prefix}--overflow-menu`);
@@ -122,8 +123,8 @@ describe('OverflowMenu', () => {
     it('should render a ul with the appropriate class', () => {
       const rootWrapper = mount(
         <OverflowMenu menuOptionsClass="extra-menu-class">
-          <div className="test-child" />
-          <div className="test-child" />
+          <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+          <OverflowMenuItem className="test-child">two</OverflowMenuItem>
         </OverflowMenu>
       );
       // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
@@ -141,8 +142,8 @@ describe('OverflowMenu', () => {
     it('should render children as expected', () => {
       const rootWrapper = mount(
         <OverflowMenu>
-          <div className="test-child" />
-          <div className="test-child" />
+          <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+          <OverflowMenuItem className="test-child">two</OverflowMenuItem>
         </OverflowMenu>
       );
       // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
@@ -151,7 +152,7 @@ describe('OverflowMenu', () => {
         .instance()
         .setState({ open: true });
       rootWrapper.update();
-      expect(rootWrapper.find('.test-child').length).toEqual(2);
+      expect(rootWrapper.find('button.test-child').length).toEqual(2);
     });
 
     it('should set expected class when state is open', () => {
@@ -267,8 +268,8 @@ describe('OverflowMenu', () => {
         <OverflowMenu
           className="extra-class"
           renderIcon={() => <div className="other">Other</div>}>
-          <div className="test-child" />
-          <div className="test-child" />
+          <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+          <OverflowMenuItem className="test-child">two</OverflowMenuItem>
         </OverflowMenu>
       );
       // renderIcon should be the only component where `${prefix}--overflow-menu__icon` class is applied,
diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem-test.js b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem-test.js
index 70943393dec6..f4d6e6a0b85d 100644
--- a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem-test.js
+++ b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem-test.js
@@ -11,7 +11,8 @@ import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
-const shallowRender = props => shallow(<OverflowMenuItem {...props} />);
+const shallowRender = props =>
+  shallow(<OverflowMenuItem closeMenu={jest.fn()} {...props} />);
 
 describe('OverflowMenuItem', () => {
   describe('Renders as expected', () => {
diff --git a/packages/react/src/components/Tag/Tag-test.js b/packages/react/src/components/Tag/Tag-test.js
index 686c0821fe10..7bcb1b3a1703 100644
--- a/packages/react/src/components/Tag/Tag-test.js
+++ b/packages/react/src/components/Tag/Tag-test.js
@@ -19,14 +19,14 @@ describe('Tag', () => {
 
   describe('automated accessibility testing', () => {
     it('should have no Axe violations', async () => {
-      const { container } = render(<Tag>This is not a tag</Tag>);
+      const { container } = render(<Tag type="red">This is not a tag</Tag>);
       await expect(container).toHaveNoAxeViolations();
     });
 
     it('should have no DAP violations', async () => {
       const { container } = render(
         <main>
-          <Tag>This is not a tag</Tag>
+          <Tag type="red">This is not a tag</Tag>
         </main>
       );
       await expect(container).toHaveNoDAPViolations('Tag');
@@ -36,7 +36,11 @@ describe('Tag', () => {
   describe('with a screenreader', () => {
     it('filtered variant should have appropriate aria-label', () => {
       const children = 'tag content';
-      const { container } = render(<Tag filter>{children}</Tag>);
+      const { container } = render(
+        <Tag type="red" filter>
+          {children}
+        </Tag>
+      );
       const button = container.querySelector('[aria-label], [aria-labelledby]');
       const accessibilityLabel =
         button.getAttribute('aria-label') ||
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js b/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
index 78ae3df6b795..5047a4241e42 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavFooter-test.js
@@ -15,7 +15,7 @@ describe('SideNavFooter', () => {
   beforeEach(() => {
     mockProps = {
       assistiveText: 'open',
-      isExpanded: false,
+      expanded: false,
       onToggle: jest.fn(),
     };
   });
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js b/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js
index b528bd2fdf81..cdf18dda93f4 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavItems-test.js
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import SideNavItems from '../SideNavItems';
+import { SideNavItems, SideNavItem } from '../';
 
 describe('SideNavItems', () => {
   let mockProps;
@@ -15,7 +15,7 @@ describe('SideNavItems', () => {
   beforeEach(() => {
     mockProps = {
       className: 'custom-classname',
-      children: <span>foo</span>,
+      children: <SideNavItem>test</SideNavItem>,
     };
   });
 
diff --git a/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js b/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
index 2c1b63c4fbb5..b030c44c8258 100644
--- a/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
+++ b/packages/react/src/components/UIShell/__tests__/SideNavMenu-test.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { SideNavMenu } from '../SideNavMenu';
+import { SideNavMenuItem } from '../';
 import { settings } from 'carbon-components';
 const { prefix } = settings;
 
@@ -71,16 +72,27 @@ describe('SideNavMenu', () => {
     ).toBe(false);
     // add a (single) child which is active
     wrapper.setProps({
-      children: <p isActive={true}>Test</p>,
+      children: <SideNavMenuItem isActive={true}>Test</SideNavMenuItem>,
     });
     expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--active`)
+      wrapper
+        .find('li')
+        .at(0)
+        .hasClass(`${prefix}--side-nav__item--active`)
     ).toBe(true);
     wrapper.setProps({
-      children: ['entry one', <p aria-current={'page'}>entry two</p>],
+      children: [
+        <SideNavMenuItem key="first">entry one</SideNavMenuItem>,
+        <SideNavMenuItem key="second" aria-current="page">
+          entry two
+        </SideNavMenuItem>,
+      ],
     });
     expect(
-      wrapper.find('li').hasClass(`${prefix}--side-nav__item--active`)
+      wrapper
+        .find('li')
+        .at(0)
+        .hasClass(`${prefix}--side-nav__item--active`)
     ).toBe(true);
   });
 
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap
index 546958f35355..627de87c7b1c 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavFooter-test.js.snap
@@ -3,7 +3,7 @@
 exports[`SideNavFooter should render 1`] = `
 <SideNavFooter
   assistiveText="open"
-  isExpanded={false}
+  expanded={false}
   onToggle={[MockFunction]}
 >
   <footer
@@ -60,6 +60,7 @@ exports[`SideNavFooter should render 1`] = `
 exports[`SideNavFooter should render 2`] = `
 <SideNavFooter
   assistiveText="close"
+  expanded={false}
   isExpanded={true}
   onToggle={[MockFunction]}
 >
diff --git a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap
index e37d10c61028..dd2082d286eb 100644
--- a/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap
+++ b/packages/react/src/components/UIShell/__tests__/__snapshots__/SideNavItems-test.js.snap
@@ -7,11 +7,15 @@ exports[`SideNavItems should render 1`] = `
   <ul
     className="bx--side-nav__items custom-classname"
   >
-    <span
+    <SideNavItem
       key=".0"
     >
-      foo
-    </span>
+      <li
+        className="bx--side-nav__item"
+      >
+        test
+      </li>
+    </SideNavItem>
   </ul>
 </SideNavItems>
 `;
diff --git a/tasks/jest/setupAfterEnv.js b/tasks/jest/setupAfterEnv.js
index ad0029b217c4..1d0764baf28b 100644
--- a/tasks/jest/setupAfterEnv.js
+++ b/tasks/jest/setupAfterEnv.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const chalk = require('chalk');
+const util = require('util');
 const toHaveNoAxeViolations = require('./matchers/toHaveNoAxeViolations');
 const toHaveNoDAPViolations = require('./matchers/toHaveNoDAPViolations');
 
@@ -20,3 +22,57 @@ const toHaveNoDAPViolations = require('./matchers/toHaveNoDAPViolations');
 // For more information, check out the docs here:
 // https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array
 expect.extend({ toHaveNoAxeViolations, toHaveNoDAPViolations });
+
+// Have our test suite throw an error if one of the below console methods are
+// called when we are not expecting them. This is often helpful for React
+// warnings that are fired with console.warn or console.error that we would want
+// to address in order for the test suite to pass.
+//
+// By default, we will throw on console.error and console.warn. In CI, we'll
+// also throw on console.log so no extraneous log statements make there way
+// through.
+//
+// Inspired by the following setup from facebook/react
+// https://github.com/facebook/react/blob/6250462bed19c9f18a8cf3c2b5fcaf9aba1df72b/scripts/jest/setupTests.js#L69
+const consoleMethods = ['error', 'warn', process.env.CI && 'log'].filter(
+  Boolean
+);
+
+for (const methodName of consoleMethods) {
+  const unexpectedConsoleCallStacks = [];
+  const newMethod = function(format, ...args) {
+    const stack = new Error().stack;
+    unexpectedConsoleCallStacks.push([
+      stack.substr(stack.indexOf('\n') + 1),
+      util.format(format, ...args),
+    ]);
+  };
+
+  console[methodName] = newMethod;
+
+  global.beforeEach(() => {
+    unexpectedConsoleCallStacks.length = 0;
+  });
+
+  global.afterEach(() => {
+    if (console[methodName] !== newMethod) {
+      throw new Error(`Test did not restore a mock for console.${methodName}`);
+    }
+
+    if (unexpectedConsoleCallStacks.length > 0) {
+      const messages = unexpectedConsoleCallStacks.map(
+        ([stack, message]) =>
+          `${message}\n` +
+          `${stack
+            .split('\n')
+            .map(line => chalk.gray(line))
+            .join('\n')}`
+      );
+      const message = `Expected test not to call ${chalk.bold(
+        `console.${methodName}()`
+      )}`;
+
+      throw new Error(`${message}\n\n${messages.join('\n\n')}`);
+    }
+  });
+}