Switch to VItest

README.md

@@ -72,9 +72,36 @@ import "react-native-testing-mocks/register";
 // ...rest of your setup code
 ```
 
-### Mocha.js Example
+### Usage with Vite
 
-Some frameworks also provide mechanisms to load setup modules. In Mocha.js, you can use the `--require` CLI option:
+Even though Vite could be in charge of transforming/resolving the React Native files, this library already does that under the hood with Babel. This is not ideal on Vite, but it does work with the right setup. Here's a minimal example of what your `vitest.config.ts` should look like:
+
+```ts
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    include: ["test/**/*.test.ts?(x)"],
+    server: {
+      deps: {
+        external: [
+          "react-native",
+          "@react-native",
+        ],
+      },
+    },
+    setupFiles: [
+      import.meta.resolve("react-native-testing-mocks/register"),
+      // ...any other setup files
+    ],
+  },
+});
+```
+
+### Usage with Mocha
+
+Some frameworks provide mechanisms to load setup modules. In Mocha.js, you can use the `--require` CLI option:
 
 ```bash
 mocha --require react-native-testing-mocks/register

package.json

@@ -46,11 +46,11 @@
   },
   "scripts": {
     "build": "vite build",
-    "check": "yarn build && yarn compile && yarn lint && yarn test",
+    "check": "yarn build && yarn compile && yarn lint && yarn test --run",
     "compile": "tsc",
     "lint": "eslint .",
     "release": "semantic-release",
-    "test": "NODE_ENV=test mocha"
+    "test": "NODE_ENV=test vitest"
   },
   "packageManager": "[email protected]",
   "dependencies": {
@@ -68,14 +68,13 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.5.0",
     "@react-native/babel-preset": "^0.74.84",
-    "@stylistic/eslint-plugin": "^2.2.2",
+    "@stylistic/eslint-plugin": "^2.3.0",
     "@testing-library/react-native": "^12.5.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__register": "^7.17.3",
     "@types/eslint__eslintrc": "^2.1.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/mocha": "^10.0.7",
-    "@types/node": "^20.14.8",
+    "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "@types/sinon": "^17.0.3",
@@ -85,24 +84,23 @@
     "eslint-plugin-etc": "^2.0.3",
     "eslint-plugin-extra-rules": "^0.0.0-development",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.4.0",
+    "eslint-plugin-jsdoc": "^48.5.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-sonarjs": "^1.0.3",
     "globals": "^15.6.0",
-    "mocha": "^10.5.0",
     "react": "18.3.1",
     "react-native": "^0.74.2",
     "react-native-svg": "^15.3.0",
     "react-test-renderer": "^18.3.1",
     "semantic-release": "^24.0.0",
     "semantic-release-yarn": "^3.0.2",
     "sinon": "^18.0.0",
-    "ts-node": "^10.9.2",
     "tslib": "^2.6.3",
     "typescript": "^5.5.2",
     "typescript-eslint": "^7.14.1",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1"
+    "vite": "^5.3.2",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "@react-native/babel-preset": ">=0.73.18",

register.js

@@ -2,10 +2,13 @@
 import pino from "pino";
 import pinoPretty from "pino-pretty";
 
+import { createRequire } from "module";
+
 const start = Date.now();
 const logger = pino(pinoPretty({ colorize: true }));
+const require = createRequire(import.meta.url);
 
-await import("./dist/register");
+require("./dist/register.cjs");
 
 const end = Date.now();
 const diff = (end - start) / 1000;

test/setup.ts

@@ -1,5 +1,6 @@
 import { userEvent } from "@testing-library/react-native";
 import Sinon from "sinon";
+import { afterEach, beforeEach } from "vitest";
 
 process.env.RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS = "true";
 
@@ -9,3 +10,14 @@ const newUserEvent = userEvent.setup({
 });
 
 Object.assign(userEvent, newUserEvent);
+
+beforeEach(() => {
+  Sinon.useFakeTimers({
+    advanceTimeDelta: 0,
+    shouldAdvanceTime: true,
+  });
+});
+
+afterEach(() => {
+  Sinon.restore();
+});

test/unit/lib/mockNative.test.tsx

@@ -2,6 +2,7 @@ import { expect } from "@assertive-ts/core";
 import { render } from "@testing-library/react-native";
 import { type ReactElement, useEffect, useRef, useState } from "react";
 import { Text, View } from "react-native";
+import { afterEach, describe, it, suite } from "vitest";
 
 import { mockNative, restoreNativeMocks } from "../../../src/lib/mockNative";
 
@@ -22,7 +23,7 @@ function TestScreen(): ReactElement {
   );
 }
 
-describe("[Unit] mockNative.test.tsx", () => {
+suite("[Unit] mockNative.test.tsx", () => {
   afterEach(restoreNativeMocks);
 
   describe(".mockNative", () => {

test/unit/register.test.tsx

@@ -3,6 +3,7 @@ import { render, userEvent, waitFor } from "@testing-library/react-native";
 import { type ReactElement, useCallback, useRef, useState } from "react";
 import { ActivityIndicator, Animated, Button, Image, Modal, ScrollView, Text, TextInput, View } from "react-native";
 import { Rect, Svg } from "react-native-svg";
+import { describe, it, suite } from "vitest";
 
 function TestScreen(): ReactElement {
   const [animated, setAnimated] = useState(false);
@@ -67,8 +68,8 @@ function TestScreen(): ReactElement {
   );
 }
 
-describe("[Unit] register.test.ts", () => {
-  context("when main is called", () => {
+suite("[Unit] register.test.ts", () => {
+  describe("when main is called", () => {
     it("mocks react native so it can render on Node.js", async () => {
       const {
         getByText,

tsconfig.json

@@ -31,9 +31,5 @@
     "build/**",
     "dist/**",
     "node_modules/**",
-  ],
-  "ts-node": {
-    "transpileOnly": true,
-    "files": true
-  }
+  ]
 }

vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true,
+    include: ["test/**/*.test.ts?(x)"],
+    server: {
+      deps: {
+        external: [
+          "react-native",
+          "@react-native",
+        ],
+      },
+    },
+    setupFiles: [
+      "./src/register.ts",
+      "./test/setup.ts",
+    ],
+  },
+});