Add test suite with Jest and @testing-library

Author: tim-soft

.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
   parser: 'babel-eslint',
   env: {
     browser: true,
-    es6: true
+    es6: true,
+    jest: true
   },
   extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:import/warnings'],
   plugins: ['prettier', 'react-hooks', 'import'],

.gitignore

@@ -6,6 +6,7 @@ node_modules
 
 # builds
 build
+coverage
 dist
 .rpt2_cache
 .next

jest.config.js

@@ -0,0 +1,12 @@
+/**
+ * Configure Jest as the test runner for @testing-library
+ *
+ * @see https://jestjs.io/docs/en/configuration
+ */
+module.exports = {
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '@testing-library/react/cleanup-after-each'
+  ],
+  collectCoverage: true
+};

package.json

@@ -25,6 +25,8 @@
     "npm": ">=5"
   },
   "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build"
@@ -56,7 +58,11 @@
     "@babel/plugin-transform-runtime": "^7.5.0",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
+    "@testing-library/jest-dom": "^4.0.0",
+    "@testing-library/react": "^8.0.7",
     "babel-eslint": "10.0.2",
+    "babel-polyfill": "^6.26.0",
+    "codecov": "^3.5.0",
     "cross-env": "^5.2.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.1",
@@ -67,6 +73,7 @@
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^1.6.1",
     "husky": "^3.0.0",
+    "jest": "^24.8.0",
     "lint-staged": "^9.2.0",
     "prettier": "^1.18.2",
     "react": "^16.8.6",

src/__tests__/use-double-click.test.js

@@ -0,0 +1,104 @@
+import React, { useRef } from 'react';
+import 'babel-polyfill';
+import { render, fireEvent } from '@testing-library/react';
+import useDoubleClick from '../index';
+
+const Button = props => {
+  const buttonRef = useRef();
+  useDoubleClick({ ref: buttonRef, ...props });
+  return (
+    <button ref={buttonRef} type="button">
+      Click Me
+    </button>
+  );
+};
+
+test('calls "onSingleClick" callback on single click', async () => {
+  const onSingleClick = jest.fn();
+  const { getByText } = render(<Button onSingleClick={onSingleClick} />);
+
+  fireEvent.click(getByText(/Click Me/i));
+
+  await new Promise(r => setTimeout(r, 300));
+
+  expect(onSingleClick).toHaveBeenCalledTimes(1);
+});
+
+test('calls "onDoubleClick" callback on double click', async () => {
+  const onDoubleClick = jest.fn();
+  const { getByText } = render(<Button onDoubleClick={onDoubleClick} />);
+
+  fireEvent.click(getByText(/Click Me/i));
+  fireEvent.click(getByText(/Click Me/i));
+
+  await new Promise(r => setTimeout(r, 300));
+
+  expect(onDoubleClick).toHaveBeenCalledTimes(1);
+});
+
+test('calls "onSingleClick" callback with custom latency', async () => {
+  const onSingleClick = jest.fn();
+  const latency = 150;
+  const { getByText } = render(
+    <Button onSingleClick={onSingleClick} latency={latency} />
+  );
+
+  fireEvent.click(getByText(/Click Me/i));
+
+  await new Promise(r => setTimeout(r, latency));
+
+  expect(onSingleClick).toHaveBeenCalledTimes(1);
+});
+
+test('calls "onDoubleClick" callback with custom latency', async () => {
+  const onSingleClick = jest.fn();
+  const latency = 150;
+  const { getByText } = render(
+    <Button onSingleClick={onSingleClick} latency={latency} />
+  );
+
+  fireEvent.click(getByText(/Click Me/i));
+
+  await new Promise(r => setTimeout(r, latency));
+
+  expect(onSingleClick).toHaveBeenCalledTimes(1);
+});
+
+test('calls "onSingleClick" callback consecutively outside of latency window', async () => {
+  const onSingleClick = jest.fn();
+  const onDoubleClick = jest.fn();
+  const latency = 150;
+  const { getByText } = render(
+    <Button
+      onSingleClick={onSingleClick}
+      onDoubleClick={onDoubleClick}
+      latency={latency}
+    />
+  );
+
+  fireEvent.click(getByText(/Click Me/i));
+  await new Promise(r => setTimeout(r, latency * 2));
+  fireEvent.click(getByText(/Click Me/i));
+  await new Promise(r => setTimeout(r, latency * 2));
+
+  expect(onSingleClick).toHaveBeenCalledTimes(2);
+  expect(onDoubleClick).toHaveBeenCalledTimes(0);
+});
+
+test('single click without onSingleClick handler', async () => {
+  const { getByText } = render(<Button />);
+
+  fireEvent.click(getByText(/Click Me/i));
+  await new Promise(r => setTimeout(r, 300));
+
+  fireEvent.click(getByText(/Click Me/i));
+  await new Promise(r => setTimeout(r, 300));
+});
+
+test('double click without onDoubleClick handler', async () => {
+  const { getByText } = render(<Button />);
+
+  fireEvent.click(getByText(/Click Me/i));
+  fireEvent.click(getByText(/Click Me/i));
+  await new Promise(r => setTimeout(r, 300));
+});