chore(tests): Use fake timers (#22)

Author: JoseLion

.mocharc.json

@@ -1,10 +1,11 @@
 {
   "$schema": "https://json.schemastore.org/mocharc",
-  "exit": true,
   "extension": ["ts", "tsx"],
   "recursive": true,
   "require": [
     "ts-node/register",
+    "src/register.ts",
+    "test/setup.ts",
     "test/hooks.ts"
   ],
   "spec": ["test/**/*.test.*"]

package.json

@@ -29,7 +29,7 @@
     "compile": "tsc",
     "lint": "eslint . --report-unused-disable-directives",
     "release": "semantic-release",
-    "test": "RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS=true NODE_ENV=test mocha"
+    "test": "NODE_ENV=test mocha"
   },
   "packageManager": "yarn@4.1.1",
   "dependencies": {

test/hooks.ts

@@ -5,5 +5,11 @@ export function mochaHooks(): Mocha.RootHookObject {
     afterEach() {
       Sinon.restore();
     },
+    beforeEach() {
+      Sinon.useFakeTimers({
+        advanceTimeDelta: 0,
+        shouldAdvanceTime: true,
+      });
+    },
   };
 }

test/setup.ts

@@ -0,0 +1,11 @@
+import { userEvent } from "@testing-library/react-native";
+import Sinon from "sinon";
+
+process.env.RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS = "true";
+
+const newUserEvent = userEvent.setup({
+  advanceTimers: delay => Sinon.clock.tickAsync(delay).then(),
+  delay: 0,
+});
+
+Object.assign(userEvent, newUserEvent);

test/unit/lib/mockNative.test.tsx

@@ -1,5 +1,3 @@
-import "../../../src/register";
-
 import { expect } from "@assertive-ts/core";
 import { render } from "@testing-library/react-native";
 import { ReactElement, useEffect, useRef, useState } from "react";

test/unit/register.test.tsx

@@ -1,5 +1,3 @@
-import "../../src/register";
-
 import { expect } from "@assertive-ts/core";
 import { render, waitFor, userEvent } from "@testing-library/react-native";
 import { ReactElement, useCallback, useRef, useState } from "react";
@@ -9,6 +7,7 @@ import { Rect, Svg } from "react-native-svg";
 function TestScreen(): ReactElement {
 
   const [animated, setAnimated] = useState(false);
+  const [greet, setGreet] = useState("Hello!");
 
   const enterLeft = useRef(new Animated.Value(100, { useNativeDriver: true })).current;
   const movePoint = useRef(new Animated.ValueXY({ x: 0, y: 0 }, { useNativeDriver: true })).current;
@@ -32,6 +31,10 @@ function TestScreen(): ReactElement {
     });
   }, []);
 
+  const changeGreet = useCallback(() => {
+    setGreet("I said hello!!!");
+  }, []);
+
   return (
     <ScrollView>
       <View>
@@ -59,6 +62,8 @@ function TestScreen(): ReactElement {
       <Animated.View style={{ marginLeft: enterLeft }}>
         <Text>{`Animated view: ${animated}`}</Text>
       </Animated.View>
+      <Button title="Long press me!" onPress={changeGreet} />
+      <Text>{greet}</Text>
     </ScrollView>
   );
 }
@@ -90,6 +95,14 @@ describe("[Unit] register.test.ts", () => {
       await userEvent.press(clickMeButton);
 
       await waitFor(() => getByText("Animated view: true"));
+
+      const longPressButton = await findByText("Long press me!");
+
+      expect(getByText("Hello!")).toBePresent();
+
+      await userEvent.longPress(longPressButton);
+
+      await waitFor(() => getByText("I said hello!!!"));
     });
   });
 });

tsconfig.json

@@ -6,8 +6,8 @@
     "esModuleInterop": true,
     "importHelpers": true,
     "incremental": true,
-    "lib": ["DOM", "ES2019", "ES2020", "ES2021", "ES2022", "ES2023"],
     "jsx": "react-jsx",
+    "lib": ["DOM", "ES2023"],
     "module": "CommonJS",
     "moduleResolution": "Node",
     "noImplicitReturns": true,