Merge pull request #10 from nbrady-techempower/hooks-stable

Hooks stable
TechEmpower · Apr 4, 2019 · e61dd39 · e61dd39
2 parents 9fdfbea + fd3a31f
commit e61dd39
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # React Governor
 
-_That typical "HOOKS ARE STILL ALPHA" warning_
+![Build Status](https://travis-ci.org/TechEmpower/react-governor.svg?branch=master)
 
 Use a governor hook to manage state with actions for, and created by, the people.
 
@@ -29,6 +29,7 @@ const contract = {
 }
 
 export default function Counter() {
+
   const [state, actions] = useGovernor(initialState, contract);
 
   return (

diff --git a/package.json b/package.json
@@ -29,8 +29,8 @@
     "Nate Brady <nbrady@techempower.com>"
   ],
   "peerDependencies": {
-    "react": "16.8.0-alpha.1",
-    "react-dom": "16.8.0-alpha.1"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "dependencies": {},
   "devDependencies": {
@@ -56,9 +56,9 @@
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
     "pretty-bytes": "^5.1.0",
-    "react": "16.8.0-alpha.1",
-    "react-dom": "16.8.0-alpha.1",
-    "react-test-renderer": "16.8.0-alpha.1",
+    "react": "16.9.0-alpha.0",
+    "react-dom": "16.9.0-alpha.0",
+    "react-test-renderer": "16.9.0-alpha.0",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.0",
@@ -111,12 +111,14 @@
     ]
   },
   "babel": {
-    "presets": [[
-      "react-app",
-      {
-        "helpers": false,
-        "absoluteRuntime": false
-      }
-    ]]
+    "presets": [
+      [
+        "react-app",
+        {
+          "helpers": false,
+          "absoluteRuntime": false
+        }
+      ]
+    ]
   }
 }
diff --git a/src/tests/counter-provider/CounterProvider.spec.js b/src/tests/counter-provider/CounterProvider.spec.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
 import TestRenderer from "react-test-renderer";
 
 import CounterProvider from "../../examples/counter-provider/CounterProvider";
@@ -57,18 +58,20 @@ it("shares state among sibling context consumers", async () => {
     .findByType(CounterChildTwo)
     .findByProps({ className: "dec" });
 
-  expect(val.props.value).toBe(0);
-  expect(val2.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
+    expect(val2.props.value).toBe(0);
 
-  await buttonOneInc.props.onClick();
+    await buttonOneInc.props.onClick();
 
-  expect(val.props.value).toBe(1);
-  expect(val2.props.value).toBe(1);
+    expect(val.props.value).toBe(1);
+    expect(val2.props.value).toBe(1);
 
-  await buttonTwoDec.props.onClick();
+    await buttonTwoDec.props.onClick();
 
-  expect(val.props.value).toBe(0);
-  expect(val2.props.value).toBe(0);
+    expect(val.props.value).toBe(0);
+    expect(val2.props.value).toBe(0);
+  });
 });
 
 it("shares state among sibling and children context consumers", async () => {
@@ -105,25 +108,27 @@ it("shares state among sibling and children context consumers", async () => {
     .findByType(CounterGrandchild)
     .findByProps({ className: "inc" });
 
-  expect(val.props.value).toBe(0);
-  expect(val2.props.value).toBe(0);
-  expect(gval.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
+    expect(val2.props.value).toBe(0);
+    expect(gval.props.value).toBe(0);
 
-  await buttonOneInc.props.onClick();
+    await buttonOneInc.props.onClick();
 
-  expect(val.props.value).toBe(1);
-  expect(val2.props.value).toBe(1);
-  expect(gval.props.value).toBe(1);
+    expect(val.props.value).toBe(1);
+    expect(val2.props.value).toBe(1);
+    expect(gval.props.value).toBe(1);
 
-  await buttonTwoDec.props.onClick();
+    await buttonTwoDec.props.onClick();
 
-  expect(val.props.value).toBe(0);
-  expect(val2.props.value).toBe(0);
-  expect(gval.props.value).toBe(0);
+    expect(val.props.value).toBe(0);
+    expect(val2.props.value).toBe(0);
+    expect(gval.props.value).toBe(0);
 
-  await gbutton.props.onClick();
+    await gbutton.props.onClick();
 
-  expect(val.props.value).toBe(1);
-  expect(val2.props.value).toBe(1);
-  expect(gval.props.value).toBe(1);
+    expect(val.props.value).toBe(1);
+    expect(val2.props.value).toBe(1);
+    expect(gval.props.value).toBe(1);
+  });
 });
diff --git a/src/tests/counter/Counter.spec.js b/src/tests/counter/Counter.spec.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
 import TestRenderer from "react-test-renderer";
 
 import Counter from "../../examples/counter/Counter";
@@ -10,90 +11,100 @@ it("renders without crashing", () => {
 });
 
 it("starts with initial state", () => {
-  const counter = TestRenderer.create(<Counter />);
-  const val = counter.root.findByProps({ className: "val" });
+  const counter = TestRenderer.create(<Counter/>);
+  const val = counter.root.findByProps({className: "val"});
 
   expect(val.props.value).toBe(0);
 });
 
 it("can increment", async () => {
-  const counter = TestRenderer.create(<Counter />);
-  const val = counter.root.findByProps({ className: "val" });
-  const button = counter.root.findByProps({ className: "inc" });
+  const counter = TestRenderer.create(<Counter/>);
+  const val = counter.root.findByProps({className: "val"});
+  const button = counter.root.findByProps({className: "inc"});
 
-  expect(val.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(1);
+    expect(val.props.value).toBe(1);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(2);
+    expect(val.props.value).toBe(2);
+  });
 });
 
 it("can decrement", async () => {
-  const counter = TestRenderer.create(<Counter />);
-  const val = counter.root.findByProps({ className: "val" });
-  const button = counter.root.findByProps({ className: "dec" });
+  const counter = TestRenderer.create(<Counter/>);
+  const val = counter.root.findByProps({className: "val"});
+  const button = counter.root.findByProps({className: "dec"});
 
-  expect(val.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(-1);
+    expect(val.props.value).toBe(-1);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(-2);
+    expect(val.props.value).toBe(-2);
+  });
 });
 
 it("can add5", async () => {
-  const counter = TestRenderer.create(<Counter />);
-  const val = counter.root.findByProps({ className: "val" });
-  const button = counter.root.findByProps({ className: "add5" });
+  const counter = TestRenderer.create(<Counter/>);
+  const val = counter.root.findByProps({className: "val"});
+  const button = counter.root.findByProps({className: "add5"});
 
-  expect(val.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(5);
+    expect(val.props.value).toBe(5);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(10);
+    expect(val.props.value).toBe(10);
+  });
 });
 
 it("can set", async () => {
   const counter = TestRenderer.create(<Counter />);
   const val = counter.root.findByProps({ className: "val" });
   const button = counter.root.findByProps({ className: "set" });
 
-  expect(val.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(137);
+    expect(val.props.value).toBe(137);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(137);
+    expect(val.props.value).toBe(137);
+  });
 });
 
 it("can addSum", async () => {
   const counter = TestRenderer.create(<Counter />);
   const val = counter.root.findByProps({ className: "val" });
   const button = counter.root.findByProps({ className: "addSum" });
 
-  expect(val.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(7);
+    expect(val.props.value).toBe(7);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(14);
+    expect(val.props.value).toBe(14);
+  });
 });
 
 it("can addNewState", async () => {
@@ -102,12 +113,14 @@ it("can addNewState", async () => {
   const newState = counter.root.findByProps({ className: "newState" });
   const button = counter.root.findByProps({ className: "addNewState" });
 
-  expect(newState.props.value).toBe(undefined);
+  await act(async () => {
+    expect(newState.props.value).toBe(undefined);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(newState.props.value).toBe("Hello");
-  expect(val.props.value).toBe(0);
+    expect(newState.props.value).toBe("Hello");
+    expect(val.props.value).toBe(0);
+  });
 });
 
 it("can removeState", async () => {
@@ -117,38 +130,44 @@ it("can removeState", async () => {
   const button = counter.root.findByProps({ className: "addNewState" });
   const removeButton = counter.root.findByProps({ className: "removeState" });
 
-  expect(newState.props.value).toBe(undefined);
+  await act(async() => {
+    expect(newState.props.value).toBe(undefined);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(newState.props.value).toBe("Hello");
-  expect(val.props.value).toBe(0);
+    expect(newState.props.value).toBe("Hello");
+    expect(val.props.value).toBe(0);
 
-  await removeButton.props.onClick();
+    await removeButton.props.onClick();
 
-  expect(val.props.value).toBe(undefined);
+    expect(val.props.value).toBe(undefined);
+  });
 });
 
 it("can asyncFunc", async () => {
   const counter = TestRenderer.create(<Counter />);
   const val = counter.root.findByProps({ className: "val" });
   const button = counter.root.findByProps({ className: "asyncFunc" });
 
-  expect(val.props.value).toBe(0);
+  await act(async () => {
+    expect(val.props.value).toBe(0);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(256);
+    expect(val.props.value).toBe(256);
+  });
 });
 
 it("can fetchGoogle", async () => {
   const counter = TestRenderer.create(<Counter />);
   const val = counter.root.findByProps({ className: "googleStatus" });
   const button = counter.root.findByProps({ className: "fetchGoogle" });
 
-  expect(val.props.value).toBe(undefined);
+  await act(async () => {
+    expect(val.props.value).toBe(undefined);
 
-  await button.props.onClick();
+    await button.props.onClick();
 
-  expect(val.props.value).toBe(200);
+    expect(val.props.value).toBe(200);
+  });
 });