test(jest): snapshot after act flush so trees are not null

Author: sanusart

packages/react-dropdown-select/__tests__/components/Clear.spec.js

@@ -29,10 +29,11 @@ describe('<Clear/> component', () => {
   });
 
   it('<Clear/> renders correctly', () => {
-    let tree;
+    let renderer;
     TestRenderer.act(() => {
-      tree = TestRenderer.create(<Clear {...props()} />).toJSON();
+      renderer = TestRenderer.create(<Clear {...props()} />);
     });
+    const tree = renderer.toJSON();
 
     expect(tree).toMatchSnapshot();
   });

packages/react-dropdown-select/__tests__/components/Content.spec.js

@@ -45,9 +45,12 @@ describe('<Content/> component', () => {
   });
 
   it('<Content/> renders correctly', () => {
-    const tree = TestRenderer.create(<Content {...props()} />).toJSON();
+    let tree;
+    TestRenderer.act(() => {
+      tree = TestRenderer.create(<Content {...props()} />);
+    });
 
-    expect(tree).toMatchSnapshot();
+    expect(tree.toJSON()).toMatchSnapshot();
   });
 
   it('onClick opens dropdown', () => {

packages/react-dropdown-select/__tests__/components/Dropdown.spec.js

@@ -26,7 +26,10 @@ const props = {
 };
 
 it('<Dropdown/> renders correctly', () => {
-  const tree = renderer.create(<Dropdown {...props} />).toJSON();
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(<Dropdown {...props} />);
+  });
 
-  expect(tree).toMatchSnapshot();
+  expect(tree.toJSON()).toMatchSnapshot();
 });

packages/react-dropdown-select/__tests__/components/Item.spec.js

@@ -28,10 +28,11 @@ describe('<Item/> component', () => {
   });
 
   test('renders correctly', () => {
-    let tree;
+    let renderer;
     TestRenderer.act(() => {
-      tree = TestRenderer.create(<Item {...props({ item: options[0] })} />).toJSON();
+      renderer = TestRenderer.create(<Item {...props({ item: options[0] })} />);
     });
+    const tree = renderer.toJSON();
 
     expect(tree).toMatchSnapshot();
   });
@@ -93,12 +94,13 @@ describe('<Item/> component', () => {
   });
 
   test('pass item renderer', () => {
-    let tree;
+    let renderer;
     TestRenderer.act(() => {
-      tree = TestRenderer.create(
+      renderer = TestRenderer.create(
         <Item {...props({ item: options[0], itemRenderer: () => <div>item</div> })} />,
-      ).toJSON();
+      );
     });
+    const tree = renderer.toJSON();
 
     expect(tree).toMatchSnapshot();
   });

packages/react-dropdown-select/__tests__/components/Loading.spec.js

@@ -13,7 +13,10 @@ const props = {
 };
 
 it('<Loading/> renders correctly', () => {
-  const tree = renderer.create(<Loading {...props} />).toJSON();
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(<Loading {...props} />);
+  });
 
-  expect(tree).toMatchSnapshot();
+  expect(tree.toJSON()).toMatchSnapshot();
 });

packages/react-dropdown-select/__tests__/components/Option.spec.js

@@ -35,10 +35,11 @@ describe('<Option/> component', () => {
   });
 
   it('renders correctly', () => {
-    let tree;
+    let renderer;
     TestRenderer.act(() => {
-      tree = TestRenderer.create(<Option {...props({ item: options[0] })} />).toJSON();
+      renderer = TestRenderer.create(<Option {...props({ item: options[0] })} />);
     });
+    const tree = renderer.toJSON();
 
     expect(tree).toMatchSnapshot();
   });

packages/react-dropdown-select/__tests__/components/Separator.spec.js

@@ -13,7 +13,10 @@ const props = {
 };
 
 it('<Separator/> renders correctly', () => {
-  const tree = renderer.create(<Separator {...props} />).toJSON();
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(<Separator {...props} />);
+  });
 
-  expect(tree).toMatchSnapshot();
+  expect(tree.toJSON()).toMatchSnapshot();
 });

packages/react-dropdown-select/__tests__/components/__snapshots__/Clear.spec.js.snap

@@ -1,3 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Clear/> component <Clear/> renders correctly 1`] = `null`;
+exports[`<Clear/> component <Clear/> renders correctly 1`] = `
+<div
+  className="react-dropdown-select-clear"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={-1}
+>
+  ×
+</div>
+`;

packages/react-dropdown-select/__tests__/components/__snapshots__/Content.spec.js.snap

@@ -1,3 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Content/> component <Content/> renders correctly 1`] = `null`;
+exports[`<Content/> component <Content/> renders correctly 1`] = `
+<div
+  className="react-dropdown-select-content react-dropdown-select-type-multi"
+  onClick={[Function]}
+>
+  <span
+    className="react-dropdown-select-option"
+    role="listitem"
+  >
+    <span
+      className="react-dropdown-select-option-label"
+    >
+      Leanne Graham
+    </span>
+    <span
+      className="react-dropdown-select-option-remove"
+      onClick={[Function]}
+    >
+      ×
+    </span>
+  </span>
+  <input
+    className="react-dropdown-select-input react-dropdown-select-input-readonly"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    readOnly={true}
+    ref={
+      {
+        "current": null,
+      }
+    }
+    style={
+      {
+        "--input-size": undefined,
+      }
+    }
+    tabIndex={-1}
+    value=""
+  />
+</div>
+`;

packages/react-dropdown-select/__tests__/components/__snapshots__/Dropdown.spec.js.snap

@@ -1,3 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dropdown/> renders correctly 1`] = `null`;
+exports[`<Dropdown/> renders correctly 1`] = `
+<div
+  aria-expanded="true"
+  className="react-dropdown-select-dropdown react-dropdown-select-dropdown-bottom "
+  role="list"
+  style={
+    {
+      "--dropdown-height": "300px",
+      "--dropdown-offset": "NaNpx",
+      "--select-color": undefined,
+      "--select-color-hover": undefined,
+      "left": -1,
+      "width": undefined,
+    }
+  }
+  tabIndex={-1}
+>
+  <div
+    className="react-dropdown-select-no-data"
+  />
+</div>
+`;