react-jitter 0.4.0 → 0.5.0

package/README.md

@@ -256,6 +256,33 @@ Here is an example of the `change` object when `includeArguments` is enabled:
 
 In this example, the `arguments` field shows that the `UserContext` was used, and the `changedKeys` field shows that the `user` property has changed.
 
+### Detecting Unstable Hooks in Unit Tests
+
+React Jitter can also be a powerful tool for improving code quality within your unit tests.
+
+You can leverage this to write tests that fail if a hook becomes unstable, catching performance regressions early in the a testing setup where you might initialize React Jitter in a global setup file, you can easily override the `onHookChange` handler on a per-test basis.
+
+```javascript
+// Example of a Vitest/Jest test
+it('should not have unstable hooks', () => {
+  const unstableChanges = [];
+  // Initialize React Jitter in a global setup file (e.g., setupTests.js)
+  // Then, override the onHookChange handler for specific tests.
+  window.reactJitter.onHookChange = (change) => {
+    // You can ignore mocked hooks or handle them specifically
+    if (change.unstable && !change.isMocked) {
+      unstableChanges.push(change);
+    }
+  };
+
+  render(<MyComponent />);
+
+  // Assert that no unstable values were detected during the render
+  expect(unstableChanges).toHaveLength(0);
+});
+```
+
+The `onHookChange` callback's `change` object includes an `isMocked` boolean property. This is automatically set to `true` if React Jitter detects that the hook has been mocked (e.g., using `jest.fn()` or `vi.fn()`). This allows you to reliably identify and assert against unstable values in your test environment.
 
 ## How It Works
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-jitter",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A developer tool for debugging React performance issues caused by hook changes and component re-renders.",
   "exports": {
     ".": {

package/runtime/dist/index.d.mts

@@ -40,6 +40,7 @@ type HookEndEvent = {
     line: number;
     offset: number;
     arguments?: string[];
+    isMocked?: boolean;
 };
 type HookAddress = Pick<HookEndEvent, 'hook' | 'file' | 'line' | 'offset' | 'arguments'>;
 type ReactJitterOptions = {
@@ -82,6 +83,7 @@ declare function useJitterScope(scope: Scope): {
     s: (id: string) => void;
     e: (hookResult: unknown, hookEndEvent: HookEndEvent) => unknown;
     re: <T>(renderResult: T) => T;
+    m: (value: unknown) => boolean;
 };
 declare function reactJitter(options: ReactJitterOptions): void;
 

package/runtime/dist/index.d.ts

@@ -40,6 +40,7 @@ type HookEndEvent = {
     line: number;
     offset: number;
     arguments?: string[];
+    isMocked?: boolean;
 };
 type HookAddress = Pick<HookEndEvent, 'hook' | 'file' | 'line' | 'offset' | 'arguments'>;
 type ReactJitterOptions = {
@@ -82,6 +83,7 @@ declare function useJitterScope(scope: Scope): {
     s: (id: string) => void;
     e: (hookResult: unknown, hookEndEvent: HookEndEvent) => unknown;
     re: <T>(renderResult: T) => T;
+    m: (value: unknown) => boolean;
 };
 declare function reactJitter(options: ReactJitterOptions): void;
 

package/runtime/dist/index.js

@@ -592,6 +592,9 @@ function useJitterScope(scope) {
             if (hookEndEvent.arguments) {
               hookCall.arguments = hookEndEvent.arguments;
             }
+            if (hookEndEvent.isMocked) {
+              hookCall.isMocked = hookEndEvent.isMocked;
+            }
             scopes[scopeId].hookChanges.push(hookCall);
             callOnHookChange(hookCall);
           }
@@ -603,6 +606,12 @@ function useJitterScope(scope) {
       re: (renderResult) => {
         callOnRender(scopes[scopeId]);
         return renderResult;
+      },
+      m: (value) => {
+        if (typeof value !== "function") {
+          return false;
+        }
+        return "mockImplementation" in value || "mockReturnValue" in value;
       }
     };
   }

package/runtime/dist/index.mjs

@@ -557,6 +557,9 @@ function useJitterScope(scope) {
             if (hookEndEvent.arguments) {
               hookCall.arguments = hookEndEvent.arguments;
             }
+            if (hookEndEvent.isMocked) {
+              hookCall.isMocked = hookEndEvent.isMocked;
+            }
             scopes[scopeId].hookChanges.push(hookCall);
             callOnHookChange(hookCall);
           }
@@ -568,6 +571,12 @@ function useJitterScope(scope) {
       re: (renderResult) => {
         callOnRender(scopes[scopeId]);
         return renderResult;
+      },
+      m: (value) => {
+        if (typeof value !== "function") {
+          return false;
+        }
+        return "mockImplementation" in value || "mockReturnValue" in value;
       }
     };
   }