test: add state hook example

examples/react/src/state-hook-example.jsx

@@ -0,0 +1,22 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable react/button-has-type */
+import React, { useState } from 'react';
+
+// eslint-disable-next-line react/prop-types
+export const MyCount = ({ n }) => (
+  <p>
+    {n}
+  </p>
+);
+
+export default function Example() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState([]);
+
+  return (
+    <div>
+      {count.map((n, ix) => (<MyCount key={ix} n={n} />))}
+      <button onClick={() => setCount([...count, count.length + 1])}>Click me</button>
+    </div>
+  );
+}

examples/react/test/state-hook-example.spec.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Example, { MyCount } from '../src/state-hook-example';
+
+describe('State hook example', () => {
+  it('should not render `<MyCount /> by default', () => {
+    const testRenderer = renderer.create(<Example />);
+    const testInstance = testRenderer.root;
+    const types = testInstance.findAllByType(MyCount);
+    expect(types).to.have.length(0);
+  });
+  it('should render `<MyCount />', () => {
+    const testRenderer = renderer.create(<Example />);
+    const testInstance = testRenderer.root;
+    testInstance.findByType('button').props.onClick();
+    const types = testInstance.findAllByType(MyCount);
+    expect(types).to.have.length(1);
+  });
+  it('should render `<MyCount />', () => {
+    const testRenderer = renderer.create(<Example />);
+    const testInstance = testRenderer.root;
+    testInstance.findByType('button').props.onClick();
+    testInstance.findByType('button').props.onClick();
+    const types = testInstance.findAllByType(MyCount);
+    expect(types).to.have.length(2);
+    const ps = testInstance.findAllByType('p');
+    expect(ps[0].props.children).to.equal(1);
+    expect(ps[1].props.children).to.equal(2);
+  });
+});