Add testing event examples.

rickbeerendonk · Apr 26, 2017 · 07b3c0d · 07b3c0d
1 parent d7fd2dc
commit 07b3c0d
Show file tree

Hide file tree

Showing 4 changed files with 231 additions and 0 deletions.
diff --git a/Test 02 - Jest/test-demo/src/App.js b/Test 02 - Jest/test-demo/src/App.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import Greeting from './Greeting';
+import ClickMe from './ClickMe';
 import './App.css';
 
 class App extends Component {
@@ -8,6 +9,7 @@ class App extends Component {
       <div>
         <Greeting />
         <hr />
+        <ClickMe />
       </div>
     );
   }

diff --git a/Test 02 - Jest/test-demo/src/ClickMe.js b/Test 02 - Jest/test-demo/src/ClickMe.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+class ClickMe extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { count: 0 };
+
+    // Bind all non-react methods to this.
+    this.onClick = this.onClick.bind(this);
+  }
+  onClick() {
+    // this.state may be updated asynchronously:
+    this.setState(prevState => ({ count: prevState.count + 1 }));
+  }
+  render() {
+    return (
+      <a onClick={this.onClick}>
+        {`This link has been clicked ${this.state.count} times`}
+      </a>
+    );
+  }
+}
+
+export default ClickMe;
diff --git a/Test 02 - Jest/test-demo/src/ClickMe.test.js b/Test 02 - Jest/test-demo/src/ClickMe.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import ClickMe from './ClickMe';
+
+/// Enzyme ///
+
+it('renders 0 snapshot (enzyme)', () => {
+  const wrapper = shallow(<ClickMe />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it('renders 1 after click snapshot (enzyme)', () => {
+  const wrapper = shallow(<ClickMe />);
+  wrapper.find('a').simulate('click');
+  expect(wrapper).toMatchSnapshot();
+});
+
+/// React Test Renderer ///
+
+it('renders 0 snapshot (react-test-renderer)', () => {
+  const component = renderer.create(<ClickMe />);
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders 1 after click snapshot (react-test-renderer)', () => {
+  const component = renderer.create(<ClickMe />);
+  let tree = component.toJSON();
+  tree.props.onClick();
+  tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
diff --git a/Test 02 - Jest/test-demo/src/__snapshots__/ClickMe.test.js.snap b/Test 02 - Jest/test-demo/src/__snapshots__/ClickMe.test.js.snap
@@ -0,0 +1,171 @@
+exports[`test renders 0 snapshot (enzyme) 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <a
+    onClick={[Function]}>
+    This link has been clicked 0 times
+</a>,
+  "nodes": Array [
+    <a
+      onClick={[Function]}>
+      This link has been clicked 0 times
+</a>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 0,
+      "_context": Object {},
+      "_currentElement": <ClickMe />,
+      "_debugID": 1,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": ClickMe {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "onClick": [Function],
+        "props": Object {},
+        "refs": Object {},
+        "state": Object {
+          "count": 0,
+        },
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 1,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <a
+          onClick={[Function]}>
+          This link has been clicked 0 times
+</a>,
+        "_debugID": 2,
+        "_renderedOutput": <a
+          onClick={[Function]}>
+          This link has been clicked 0 times
+</a>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <ClickMe />,
+}
+`;
+
+exports[`test renders 0 snapshot (react-test-renderer) 1`] = `
+<a
+  onClick={[Function]}>
+  This link has been clicked 0 times
+</a>
+`;
+
+exports[`test renders 1 after click snapshot (enzyme) 1`] = `
+ShallowWrapper {
+  "complexSelector": ComplexSelector {
+    "buildPredicate": [Function],
+    "childrenOfNode": [Function],
+    "findWhereUnwrapped": [Function],
+  },
+  "length": 1,
+  "node": <a
+    onClick={[Function]}>
+    This link has been clicked 1 times
+</a>,
+  "nodes": Array [
+    <a
+      onClick={[Function]}>
+      This link has been clicked 1 times
+</a>,
+  ],
+  "options": Object {},
+  "renderer": ReactShallowRenderer {
+    "_instance": ShallowComponentWrapper {
+      "_calledComponentWillUnmount": false,
+      "_compositeType": 0,
+      "_context": Object {},
+      "_currentElement": <ClickMe />,
+      "_debugID": 3,
+      "_hostContainerInfo": null,
+      "_hostParent": null,
+      "_instance": ClickMe {
+        "_reactInternalInstance": [Circular],
+        "context": Object {},
+        "onClick": [Function],
+        "props": Object {},
+        "refs": Object {},
+        "state": Object {
+          "count": 1,
+        },
+        "updater": Object {
+          "enqueueCallback": [Function],
+          "enqueueCallbackInternal": [Function],
+          "enqueueElementInternal": [Function],
+          "enqueueForceUpdate": [Function],
+          "enqueueReplaceState": [Function],
+          "enqueueSetState": [Function],
+          "isMounted": [Function],
+          "validateCallback": [Function],
+        },
+      },
+      "_mountOrder": 2,
+      "_pendingCallbacks": null,
+      "_pendingElement": null,
+      "_pendingForceUpdate": false,
+      "_pendingReplaceState": false,
+      "_pendingStateQueue": null,
+      "_renderedComponent": NoopInternalComponent {
+        "_currentElement": <a
+          onClick={[Function]}>
+          This link has been clicked 1 times
+</a>,
+        "_debugID": 4,
+        "_renderedOutput": <a
+          onClick={[Function]}>
+          This link has been clicked 1 times
+</a>,
+      },
+      "_renderedNodeType": 0,
+      "_rootNodeID": 0,
+      "_topLevelWrapper": null,
+      "_updateBatchNumber": null,
+      "_warnedAboutRefsInRender": false,
+    },
+    "getRenderOutput": [Function],
+    "render": [Function],
+  },
+  "root": [Circular],
+  "unrendered": <ClickMe />,
+}
+`;
+
+exports[`test renders 1 after click snapshot (react-test-renderer) 1`] = `
+<a
+  onClick={[Function]}>
+  This link has been clicked 1 times
+</a>
+`;