WIP: enzyme click bug

demo/components/presentational/EthereumSignUpForm.js

@@ -13,10 +13,15 @@ export default class EthereumSignUpForm extends React.Component {
     address: "",
   };
 
-  createAccount = async () => {
-    // TODO: Remove await when SDK 0.0.3 is out
+  handleAsync = async () => {
     const wallet = await Account.create();
     this.setState({ address: wallet.address });
+    console.log("Async button clicked");
+  };
+
+  handleSync = () => {
+    this.setState({ address: "0x" });
+    console.log("Sync button clicked");
   };
 
   render() {
@@ -38,7 +43,8 @@ export default class EthereumSignUpForm extends React.Component {
           </View>
         </View>
         <View style={styles.buttonView}>
-          <Button title="Continue" onPress={() => this.createAccount()} />
+          <Button title="Aync" onPress={() => this.handleAsync()} />
+          <Button title="Sync" onPress={() => this.handleSync()} />
         </View>
       </React.Fragment>
     );

demo/components/presentational/EthereumSignUpForm.test.js

@@ -4,19 +4,103 @@ import { shallow } from "enzyme";
 import EthereumSignUpForm from "./EthereumSignUpForm";
 
 describe("EthereumSignUpForm", () => {
-  jest.useFakeTimers();
   beforeEach(() => {
     NavigationTestUtils.resetInternalState();
   });
 
-  it("renders the component", async () => {
-    expect(shallow(<EthereumSignUpForm />)).toMatchSnapshot();
+  it("creates a wallet - calling function", async () => {
+    const wrapper = shallow(<EthereumSignUpForm />);
+    expect(wrapper.state("address")).toEqual("");
+    await wrapper.instance().handleAsync();
+    expect(wrapper.state("address")).not.toEqual("");
   });
 
-  it("creates a wallet - calling function", async () => {
+  it("creates a wallet - pressing sync button", async () => {
     const wrapper = shallow(<EthereumSignUpForm />);
+
     expect(wrapper.state("address")).toEqual("");
-    await wrapper.instance().createAccount();
+
+    wrapper
+      .find("Button")
+      .find({ title: "Sync" })
+      .simulate("press");
+
+    wrapper.update();
+
+    expect(wrapper.state("address")).not.toEqual("");
+  });
+
+  it("creates a wallet - pressing async button (1)", async () => {
+    const wrapper = shallow(<EthereumSignUpForm />);
+
+    expect(wrapper.state("address")).toEqual("");
+
+    wrapper
+      .find("Button")
+      .find({ title: "Aync" })
+      .simulate("press");
+
+    await Promise.resolve();
+
+    wrapper.update();
+
+    expect(wrapper.state("address")).not.toEqual("");
+  });
+
+  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+  it("creates a wallet - pressing async button (2.1)", async () => {
+    jest.useFakeTimers();
+    const wrapper = shallow(<EthereumSignUpForm />);
+
+    expect(wrapper.state("address")).toEqual("");
+
+    wrapper
+      .find("Button")
+      .find({ title: "Aync" })
+      .simulate("press");
+
+    // Note: Bad practice
+    await sleep(200);
+
+    wrapper.update();
+
+    expect(wrapper.state("address")).not.toEqual("");
+  });
+
+  it("creates a wallet - pressing async button (2.2)", async () => {
+    jest.useRealTimers();
+    const wrapper = shallow(<EthereumSignUpForm />);
+
+    expect(wrapper.state("address")).toEqual("");
+
+    wrapper
+      .find("Button")
+      .find({ title: "Aync" })
+      .simulate("press");
+
+    // Note: Bad practice
+    await sleep(200);
+
+    wrapper.update();
+
+    expect(wrapper.state("address")).not.toEqual("");
+  });
+
+  it("creates a wallet - pressing async button (3)", async () => {
+    const wrapper = shallow(<EthereumSignUpForm />);
+
+    expect(wrapper.state("address")).toEqual("");
+
+    // Note: Has an PR to improve API with invoke() function that will work same as code below
+    // https://github.com/airbnb/enzyme/pull/1856
+    await wrapper
+      .find("Button")
+      .find({ title: "Aync" })
+      .prop("onPress")();
+
+    wrapper.update();
+
     expect(wrapper.state("address")).not.toEqual("");
   });
 });

demo/package.json

@@ -10,6 +10,7 @@
     "ios": "npx expo start --ios",
     "eject": "npx expo eject",
     "test": "npx jest",
+    "test:bug": "npx jest components/presentational/EthereumSignUpForm.test.js --noStackTrace",
     "lint": "npx prettier --write '{*.js,**/*.js,*.jsx,**/*.jsx}' && npx eslint '{*.js,**/*.js,*.jsx,**/*.jsx,**/*.snap}'"
   },
   "dependencies": {