How to use it in tests?

[mirusky]

I have some trouble while running tests, currently we use next-router-mock that's a in memory next router, that doesn't change the url itself neither the history api.

When the code calls window.history.state.__next_navigation_guard_stack_index it breaks, since the history api is not being used by the next-router-mock.

Is there a way to avoid this?

[ypresto]

Oh, I have not aware of that nice library!

https://www.npmjs.com/package/next-router-mock#storybook-configuration

    config.resolve.alias = {
      ...config.resolve.alias,
      "next/router": "next-router-mock",
    };

It seems hacky one, and it might not provide history.state mock.

If you don't need navigation guard in tests, I'll provide <NoopNavigationGuardProvider>.

[oddestdan]

Hey @ypresto, I'm enjoying the library a lot as it solved all our project's needs, but it also fails our unit tests with same issue. We use vitest with Next.js App Router, and I think a Noop would be a solid solution

[patik]

I used patch-package with this diff and it solved the problem for me:

diff --git a/node_modules/next-navigation-guard/dist/utils/historyAugmentation.js b/node_modules/next-navigation-guard/dist/utils/historyAugmentation.js
index cf2f78c..ce5aed3 100644
--- a/node_modules/next-navigation-guard/dist/utils/historyAugmentation.js
+++ b/node_modules/next-navigation-guard/dist/utils/historyAugmentation.js
@@ -7,6 +7,10 @@ const debug_1 = require("./debug");
 let setupDone = false;
 let writeState = () => { };
 function newToken() {
+    if (typeof crypto === 'undefined' || !('randomUUID' in crypto)) {
+        return String(Math.random())
+    }
+    
     return crypto.randomUUID().substring(0, 8);
 }
 // Next.js also modifies history.pushState and history.replaceState in useEffect.
@@ -27,10 +31,10 @@ function setupHistoryAugmentationOnce({ renderedStateRef, }) {
         };
     }
     renderedStateRef.current.index =
-        parseInt(window.history.state.__next_navigation_guard_stack_index) || 0;
+        'state' in window.history ? parseInt(window.history.state.__next_navigation_guard_stack_index) || 0 : 0;
     renderedStateRef.current.token =
-        String((_a = window.history.state.__next_navigation_guard_token) !== null && _a !== void 0 ? _a : "") ||
-            newToken();
+        'state' in window.history ? String((_a = window.history.state.__next_navigation_guard_token) !== null && _a !== void 0 ? _a : "") ||
+            newToken() : newToken();
     if (debug_1.DEBUG)
         console.log(`setupHistoryAugmentationOnce: initial currentIndex is ${renderedStateRef.current.index}, token is ${renderedStateRef.current.token}`);
     writeState = () => {
@@ -43,7 +47,7 @@ function setupHistoryAugmentationOnce({ renderedStateRef, }) {
         };
         originalReplaceState.call(window.history, modifiedState, "", window.location.href);
     };
-    if (window.history.state.__next_navigation_guard_stack_index == null ||
+    if ('state' in window.history && window.history.state.__next_navigation_guard_stack_index == null ||
         window.history.state.__next_navigation_guard_token == null) {
         writeState();
     }

For Jest, I also had to apply the change in #14, and add this to my test:

Object.defineProperty(window.history, 'state', {
    writable: true,
    value: {},
})