kent example

Author: lugithub

package-lock.json

@@ -13,6 +13,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
+    "react-transition-group": "^4.0.1",
     "rxjs": "^6.5.2",
     "typescript": "3.4.5"
   },
@@ -41,6 +42,7 @@
     "@types/axios": "^0.14.0",
     "@types/enzyme": "^3.9.2",
     "@types/ramda": "^0.26.8",
+    "@types/react-transition-group": "^2.9.1",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.13.0",
     "jest-dom": "^3.2.2",

package.json

@@ -0,0 +1,35 @@
+import 'react-testing-library/cleanup-after-each';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { render, fireEvent } from 'react-testing-library';
+import HiddenMessage from './hidden-message';
+
+// NOTE: you do NOT have to do this in every test.
+// Learn more about Jest's __mocks__ directory:
+// https://jestjs.io/docs/en/manual-mocks
+jest.mock('react-transition-group', () => {
+  return {
+    CSSTransition: jest.fn(({ children, in: show }) => (show ? children : null))
+  };
+});
+test('you can mock things with jest.mock', () => {
+  const { getByText, queryByText } = render(
+    <HiddenMessage initialShow={true} />
+  );
+  const toggleButton = getByText('Toggle');
+  const context = expect.any(Object);
+  const children = expect.any(Object);
+  const defaultProps = { children, timeout: 1000, className: 'fade' };
+  expect(CSSTransition).toHaveBeenCalledWith(
+    { in: true, ...defaultProps },
+    context
+  );
+  expect(getByText('Hello world')).not.toBeNull();
+  CSSTransition.mockClear();
+  fireEvent.click(toggleButton);
+  expect(queryByText('Hello world')).toBeNull();
+  expect(CSSTransition).toHaveBeenCalledWith(
+    { in: false, ...defaultProps },
+    context
+  );
+});

src/testing-lib/hidden-message.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+function Fade(props: { children: any; in: boolean }) {
+  return (
+    <CSSTransition in={props.in} timeout={1000} className="fade">
+      {props.children}
+    </CSSTransition>
+  );
+}
+
+export default class HiddenMessage extends React.Component<
+  {
+    initialShow: boolean;
+  },
+  { show: boolean }
+> {
+  static defaultProps = { initialShow: false };
+  state = { show: this.props.initialShow };
+  toggle = () => {
+    this.setState(({ show }) => ({ show: !show }));
+  };
+  render() {
+    return (
+      <div>
+        <button onClick={this.toggle}>Toggle</button>
+        <Fade in={this.state.show}>
+          <div>Hello world</div>
+        </Fade>
+      </div>
+    );
+  }
+}