chore: upgrade jest to incorporate jsdom bugfix (#5456)

* chore: upgrade jest

* test: adjust for new document.activeElement behavior in jsdom

* test: clean up container div

Co-authored-by: Josh Black <[email protected]>

package.json

@@ -60,7 +60,7 @@
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "husky": "^4.0.10",
-    "jest": "^24.9.0",
+    "jest": "^25.1.0",
     "jest-circus": "^24.9.0",
     "jest-junit": "^10.0.0",
     "lerna": "^3.20.2",

packages/react/src/components/Checkbox/Checkbox-test.js

@@ -110,6 +110,8 @@ describe('Checkbox', () => {
 });
 
 describe('refs', () => {
+  let container;
+
   it('should accept refs', () => {
     class MyComponent extends React.Component {
       constructor(props) {
@@ -131,7 +133,12 @@ describe('refs', () => {
         );
       }
     }
-    const wrapper = mount(<MyComponent />);
+    container = document.createElement('div');
+    container.id = 'container';
+    document.body.appendChild(container);
+    const wrapper = mount(<MyComponent />, {
+      attachTo: document.querySelector('#container'),
+    });
     expect(document.activeElement.type).toBeUndefined();
     wrapper.instance().focus();
     expect(document.activeElement.type).toEqual('checkbox');
@@ -157,6 +164,13 @@ describe('refs', () => {
     const wrapper = mount(<MyComponent />);
     expect(wrapper.find('input').getDOMNode().indeterminate).toBe(true);
   });
+
+  afterEach(() => {
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    container = null;
+  });
 });
 
 describe('CheckboxSkeleton', () => {

packages/react/src/components/ComposedModal/ComposedModal-test.js

@@ -153,6 +153,8 @@ describe('<ModalFooter />', () => {
 });
 
 describe('<ComposedModal />', () => {
+  let container;
+
   it('renders', () => {
     const wrapper = mount(<ComposedModal open />);
     expect(wrapper).toMatchSnapshot();
@@ -214,25 +216,40 @@ describe('<ComposedModal />', () => {
   });
 
   it('should focus on the primary actionable button in ModalFooter by default', () => {
+    container = document.createElement('div');
+    container.id = 'container';
+    document.body.appendChild(container);
     mount(
       <ComposedModal open>
         <ModalFooter primaryButtonText="Save" />
-      </ComposedModal>
+      </ComposedModal>,
+      { attachTo: document.querySelector('#container') }
     );
     expect(
       document.activeElement.classList.contains(`${prefix}--btn--primary`)
     ).toEqual(true);
   });
 
   it('should focus on the element that matches selectorPrimaryFocus', () => {
+    container = document.createElement('div');
+    container.id = 'container';
+    document.body.appendChild(container);
     mount(
       <ComposedModal open selectorPrimaryFocus={`.${prefix}--modal-close`}>
         <ModalHeader label="Optional Label" title="Example" />
         <ModalFooter primaryButtonText="Save" />
-      </ComposedModal>
+      </ComposedModal>,
+      { attachTo: document.querySelector('#container') }
     );
     expect(
       document.activeElement.classList.contains(`${prefix}--modal-close`)
     ).toEqual(true);
   });
+
+  afterEach(() => {
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    container = null;
+  });
 });

packages/react/src/components/Select/Select-test.js

@@ -150,6 +150,8 @@ describe('Select', () => {
 });
 
 describe('refs', () => {
+  let container;
+
   it('should accept refs', () => {
     class MyComponent extends React.Component {
       constructor(props) {
@@ -164,11 +166,23 @@ describe('refs', () => {
         return <Select id="test" labelText="testlabel" ref={this.myRef} />;
       }
     }
-    const wrapper = mount(<MyComponent />);
+    container = document.createElement('div');
+    container.id = 'container';
+    document.body.appendChild(container);
+    const wrapper = mount(<MyComponent />, {
+      attachTo: document.querySelector('#container'),
+    });
     expect(document.activeElement.type).toBeUndefined();
     wrapper.instance().focus();
     expect(document.activeElement.type).toEqual('select-one');
   });
+
+  afterEach(() => {
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    container = null;
+  });
 });
 
 describe('SelectSkeleton', () => {

packages/react/src/components/TextInput/ControlledPasswordInput-test.js

@@ -27,6 +27,8 @@ describe('TextInput', () => {
     const textInput = () => wrapper.find('input');
 
     describe('input', () => {
+      let container;
+
       it('renders as expected', () => {
         expect(textInput().length).toBe(1);
       });
@@ -47,7 +49,12 @@ describe('TextInput', () => {
             );
           }
         }
-        const wrapper = mount(<MyComponent />);
+        container = document.createElement('div');
+        container.id = 'container';
+        document.body.appendChild(container);
+        const wrapper = mount(<MyComponent />, {
+          attachTo: document.querySelector('#container'),
+        });
         expect(document.activeElement.type).toBeUndefined();
         wrapper.instance().focus();
         expect(document.activeElement.type).toEqual('text');
@@ -91,6 +98,13 @@ describe('TextInput', () => {
         wrapper.setProps({ placeholder: 'Enter text' });
         expect(textInput().props().placeholder).toEqual('Enter text');
       });
+
+      afterEach(() => {
+        if (container && container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+        container = null;
+      });
     });
 
     describe('label', () => {

packages/react/src/components/TextInput/TextInput-test.js

@@ -27,6 +27,8 @@ describe('TextInput', () => {
     const textInput = () => wrapper.find('input');
 
     describe('input', () => {
+      let container;
+
       it('renders as expected', () => {
         expect(textInput().length).toBe(1);
       });
@@ -47,7 +49,12 @@ describe('TextInput', () => {
             );
           }
         }
-        const wrapper = mount(<MyComponent />);
+        container = document.createElement('div');
+        container.id = 'container';
+        document.body.appendChild(container);
+        const wrapper = mount(<MyComponent />, {
+          attachTo: document.querySelector('#container'),
+        });
         expect(document.activeElement.type).toBeUndefined();
         wrapper.instance().focus();
         expect(document.activeElement.type).toEqual('text');
@@ -91,6 +98,13 @@ describe('TextInput', () => {
         wrapper.setProps({ placeholder: 'Enter text' });
         expect(textInput().props().placeholder).toEqual('Enter text');
       });
+
+      afterEach(() => {
+        if (container && container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+        container = null;
+      });
     });
 
     describe('label', () => {