Lint test files

.eslintrc.json

@@ -10,11 +10,21 @@
     "no-nested-ternary": "off",
     "no-param-reassign": "off",
     "func-names": "off",
-    "max-classes-per-file": "off"
+    "max-classes-per-file": "off",
+    "react/prefer-stateless-function": "off",
+    "react/prop-types": "off"
   },
   "globals": {
     "window": true,
     "EventTarget": true,
-    "WebSocket": true
+    "WebSocket": true,
+    "describe": true,
+    "afterAll": true,
+    "test": true,
+    "expect": true,
+    "afterEach": true,
+    "document": true,
+    "jest": true,
+    "Event": true
   }
 }

__mocks__/react-native.js

@@ -1,3 +1,3 @@
 // this is here to avoid duplicate react entries in the examples
 // (one from the example's node_modules and one from the root's node_modules)
-module.exports = require('react-native')
+module.exports = require('react-native');

__tests__/Clock.test.jsx

@@ -0,0 +1,40 @@
+import React, { StrictMode } from 'react';
+import { render, cleanup, act } from '@testing-library/react/pure';
+import sinon from 'sinon';
+import App from '../examples/clock/src/App';
+
+describe('Clock App', () => {
+  const clock = sinon.useFakeTimers();
+  const { container, unmount } = render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+
+  const clearIntervalSpy = sinon.spy(global, 'clearInterval');
+
+  afterAll(() => {
+    cleanup();
+    clock.restore();
+    clearIntervalSpy.restore();
+  });
+
+  test('should update to display the current time every second', () => {
+    expect(container).toHaveTextContent('12:00:00 AM');
+
+    act(() => {
+      clock.tick(2000);
+    });
+    expect(container).toHaveTextContent('12:00:02 AM');
+
+    act(() => {
+      clock.tick(8500);
+    });
+    expect(container).toHaveTextContent('12:00:10 AM');
+  });
+
+  test('should clean up the interval timer when the component is unmounted', () => {
+    unmount();
+    expect(clearIntervalSpy.callCount).toBe(1);
+  });
+});

__tests__/Clock.test.native.jsx

@@ -0,0 +1,40 @@
+import React, { StrictMode } from 'react';
+import {
+  render,
+  flushMicrotasksQueue,
+} from 'react-native-testing-library';
+import sinon from 'sinon';
+import App from '../examples/native-clock/App';
+
+describe('Clock App', () => {
+  const clock = sinon.useFakeTimers();
+  const { getByText, unmount } = render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+  // flush the inital didMount effect
+  flushMicrotasksQueue();
+
+  const clearIntervalSpy = sinon.spy(global, 'clearInterval');
+
+  afterAll(() => {
+    clock.restore();
+    clearIntervalSpy.restore();
+  });
+
+  test('should update to display the current time every second', () => {
+    expect(getByText('12:00:00 AM')).toBeDefined();
+
+    clock.tick(2000);
+    expect(getByText('12:00:02 AM')).toBeDefined();
+
+    clock.tick(8500);
+    expect(getByText('12:00:10 AM')).toBeDefined();
+  });
+
+  test('should clean up the interval timer when the component is unmounted', () => {
+    unmount();
+    expect(clearIntervalSpy.callCount).toBe(1);
+  });
+});