@khanacademy/wonder-blocks-data 10.1.0 → 10.1.2

package/src/components/{data.js → data.ts}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import {
@@ -12,15 +11,14 @@ type Props<
     /**
      * The type of data resolved by the handler's fulfillRequest method.
      */
-    TData: ValidCacheData,
-> = {|
+    TData extends ValidCacheData,
+> = {
     /**
      * A unique identifier for the request.
      *
      * This should not be shared by other uses of this component.
      */
-    requestId: string,
-
+    requestId: string;
     /**
      * This defines how the request is fulfilled.
      *
@@ -28,8 +26,7 @@ type Props<
      * old handler result may be given. This is not a supported mode of
      * operation.
      */
-    handler: () => Promise<TData>,
-
+    handler: () => Promise<TData>;
     /**
      * How the hook should behave when rendering client-side for the first time.
      *
@@ -37,8 +34,7 @@ type Props<
      *
      * Default is `OnClientRender.ExecuteWhenNoSuccessResult`.
      */
-    clientBehavior?: $Values<typeof WhenClientSide>,
-
+    clientBehavior?: typeof WhenClientSide[keyof typeof WhenClientSide];
     /**
      * When true, the children will be rendered with the existing result
      * until the pending load is completed. Otherwise, the children will be
@@ -46,28 +42,28 @@ type Props<
      *
      * Defaults to false.
      */
-    retainResultOnChange?: boolean,
-
+    retainResultOnChange?: boolean;
     /**
      * A function that will render the content of this component using the
      * loading state and data or error that gets retrieved from cache or loaded
      * via the request if no cached value is available.
      */
-    children: (result: Result<TData>) => React.Node,
-|};
+    children: (result: Result<TData>) => React.ReactElement;
+};
 
 /**
  * This component is the main component of Wonder Blocks Data. With this, data
  * requirements can be placed in a React application in a manner that will
  * support server-side rendering and efficient caching.
  */
-const Data = <TData: ValidCacheData>({
+// TODO(FEI-5000): Update this support generic props correctly
+const Data: React.FC<Props<any>> = <TData extends ValidCacheData>({
     requestId,
     handler,
     children,
     retainResultOnChange = false,
     clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
-}: Props<TData>): React.Node => {
+}: Props<TData>): React.ReactElement => {
     const result = useHydratableEffect(requestId, handler, {
         retainResultOnChange,
         clientBehavior,

package/src/components/{gql-router.js → gql-router.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 import {GqlRouterContext} from "../util/gql-router-context";
@@ -9,22 +8,20 @@ import type {
     GqlRouterConfiguration,
 } from "../util/gql-types";
 
-type Props<TContext: GqlContext> = {|
+type Props<TContext extends GqlContext> = {
     /**
      * The default context to be used by operations when no context is provided.
      */
-    defaultContext: TContext,
-
+    defaultContext: TContext;
     /**
      * The function to use when fetching requests.
      */
-    fetch: GqlFetchFn<any, any, TContext>,
-
+    fetch: GqlFetchFn<any, any, TContext>;
     /**
      * The children to be rendered inside the router.
      */
-    children: React.Node,
-|};
+    children: React.ReactNode;
+};
 
 /**
  * Configure GraphQL routing for GraphQL hooks and components.
@@ -32,17 +29,18 @@ type Props<TContext: GqlContext> = {|
  * These can be nested. Components and hooks relying on the GraphQL routing
  * will use the configuration from their closest ancestral GqlRouter.
  */
-export const GqlRouter = <TContext: GqlContext>({
+// TODO(FEI-5000): Update this support generic props correctly
+export const GqlRouter: React.FC<Props<any>> = <TContext extends GqlContext>({
     defaultContext: thisDefaultContext,
     fetch: thisFetch,
     children,
-}: Props<TContext>): React.Node => {
+}: Props<TContext>): React.ReactElement => {
     // We don't care if we're nested. We always force our callers to define
     // everything. It makes for a clearer API and requires less error checking
-    // code (assuming our flow types are correct). We also don't default fetch
-    // to anything - our callers can tell us what function to use quite easily.
-    // If code that consumes this wants more nuanced nesting, it can implement
-    // it within its own GqlRouter than then defers to this one.
+    // code (assuming our TypeScript types are correct). We also don't default
+    // fetch to anything - our callers can tell us what function to use quite
+    // easily. If code that consumes this wants more nuanced nesting, it can
+    // implement it within its own GqlRouter than then defers to this one.
 
     // We want to always use the same object if things haven't changed to avoid
     // over-rendering consumers of our context, let's memoize the configuration.

package/src/components/{intercept-context.js → intercept-context.ts}

@@ -1,9 +1,10 @@
-// @flow
 import * as React from "react";
 import type {ValidCacheData} from "../util/types";
 
-type InterceptContextData = $ReadOnlyArray<
-    (requestId: string) => ?Promise<?ValidCacheData>,
+type InterceptContextData = ReadonlyArray<
+    (
+        requestId: string,
+    ) => Promise<ValidCacheData | null | undefined> | null | undefined
 >;
 
 /**

package/src/components/{intercept-requests.js → intercept-requests.tsx}

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 
 import InterceptContext from "./intercept-context";
 
 import type {ValidCacheData} from "../util/types";
 
-type Props<TData: ValidCacheData> = {|
+type Props<TData extends ValidCacheData> = {
     /**
      * Called to intercept and possibly handle the request.
      * If this returns null, the request will be handled by ancestor
@@ -20,16 +19,15 @@ type Props<TData: ValidCacheData> = {|
      * so make sure to only intercept requests that you recognize from the
      * identifier.
      */
-    interceptor: (requestId: string) => ?Promise<TData>,
-
+    interceptor: (requestId: string) => Promise<TData> | null | undefined;
     /**
      * The children to render within this component. Any requests by `Data`
      * components that use same ID as this component will be intercepted.
      * If `InterceptRequests` is used within `children`, that interception will
      * be given a chance to intercept first.
      */
-    children: React.Node,
-|};
+    children: React.ReactNode;
+};
 
 /**
  * This component provides a mechanism to intercept data requests.
@@ -45,10 +43,11 @@ type Props<TData: ValidCacheData> = {|
  * interceptor closest to the intercepted request is called first, and the
  * furthest interceptor is called last.
  */
-const InterceptRequests = <TData: ValidCacheData>({
+// TODO(FEI-5000): Update this support generic props correctly
+const InterceptRequests: React.FC<Props<any>> = <TData extends ValidCacheData>({
     interceptor,
     children,
-}: Props<TData>): React.Node => {
+}: Props<TData>): React.ReactElement => {
     const interceptors = React.useContext(InterceptContext);
 
     const updatedInterceptors = React.useMemo(

package/src/components/{track-data.js → track-data.tsx}

@@ -1,18 +1,17 @@
-// @flow
 import * as React from "react";
 import {Server} from "@khanacademy/wonder-blocks-core";
 
 import {RequestTracker, TrackerContext} from "../util/request-tracking";
 
-type TrackDataProps = {|
-    children: React.Node,
-|};
+type TrackDataProps = {
+    children: React.ReactNode;
+};
 
 /**
  * Component to enable data request tracking when server-side rendering.
  */
 export default class TrackData extends React.Component<TrackDataProps> {
-    render(): React.Node {
+    render(): React.ReactElement {
         if (!Server.isServerSide()) {
             throw new Error(
                 "This component is not for use during client-side rendering",

package/src/hooks/__tests__/{use-cached-effect.test.js → use-cached-effect.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {
     renderHook as clientRenderHook,
@@ -23,8 +22,8 @@ jest.mock("../use-request-interception");
 jest.mock("../use-shared-cache");
 
 const allPolicies = Array.from(values(FetchPolicy));
-const allPoliciesBut = (policy: $Values<typeof FetchPolicy>) =>
-    allPolicies.filter((p) => p !== policy);
+const allPoliciesBut = (policy: typeof FetchPolicy[keyof typeof FetchPolicy]) =>
+    allPolicies.filter((p: any) => p !== policy);
 
 describe("#useCachedEffect", () => {
     beforeEach(() => {
@@ -38,14 +37,14 @@ describe("#useCachedEffect", () => {
         jest.spyOn(
             UseRequestInterception,
             "useRequestInterception",
-        ).mockImplementation((_, handler) => handler);
+        ).mockImplementation((_: any, handler: any) => handler);
 
         // We need the cache to work a little so that we get our result.
-        const cache = {};
+        const cache: Record<string, any> = {};
         jest.spyOn(UseSharedCache, "useSharedCache").mockImplementation(
-            (id, _, defaultValue) => {
+            (id: any, _: any, defaultValue: any) => {
                 const setCache = React.useCallback(
-                    (v) => (cache[id] = v),
+                    (v: any) => (cache[id] = v),
                     [id],
                 );
                 return [cache[id] ?? defaultValue, setCache];
@@ -81,7 +80,7 @@ describe("#useCachedEffect", () => {
             ${"foo"}     | ${"foo"}
         `(
             "should call useSharedCache with id, scope=$scope, without a default",
-            ({scope, cachedResult, expectedScope}) => {
+            ({scope, cachedResult, expectedScope}: any) => {
                 const fakeHandler = jest.fn();
                 const useSharedCacheSpy = jest.spyOn(
                     UseSharedCache,
@@ -103,7 +102,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPolicies)(
             "should not request data for FetchPolicy.%s",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 // Arrange
                 const fakeHandler = jest.fn().mockResolvedValue("data");
 
@@ -119,7 +118,7 @@ describe("#useCachedEffect", () => {
 
         describe.each(allPolicies)(
             "with FetchPolicy.%s without cached result",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 it("should return a loading result", () => {
                     // Arrange
                     const fakeHandler = jest.fn();
@@ -141,7 +140,7 @@ describe("#useCachedEffect", () => {
 
         describe.each(allPoliciesBut(FetchPolicy.NetworkOnly))(
             "with FetchPolicy.%s with cached result",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 it("should return the result", () => {
                     // Arrange
                     const fakeHandler = jest.fn();
@@ -216,7 +215,7 @@ describe("#useCachedEffect", () => {
 
         it("should share inflight requests for the same requestId", () => {
             // Arrange
-            const pending = new Promise((resolve, reject) => {
+            const pending = new Promise((resolve: any, reject: any) => {
                 /*pending*/
             });
             const fakeHandler = jest.fn().mockReturnValue(pending);
@@ -231,7 +230,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should provide function that causes refetch with FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA1");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -245,9 +244,11 @@ describe("#useCachedEffect", () => {
                     useCachedEffect("ID", fakeHandler, {fetchPolicy}),
                 );
                 fakeHandler.mockClear();
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
                 act(refetch);
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
 
                 // Assert
                 expect(fakeHandler).toHaveBeenCalledTimes(1);
@@ -278,7 +279,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should fulfill request when there is no cached value and FetchPolicy.%s",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 // Arrange
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
@@ -298,7 +299,7 @@ describe("#useCachedEffect", () => {
 
         it.each([FetchPolicy.CacheAndNetwork, FetchPolicy.NetworkOnly])(
             "should fulfill request when there is a cached value and FetchPolicy.%s",
-            (fetchPolicy) => {
+            (fetchPolicy: any) => {
                 // Arrange
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
@@ -325,7 +326,7 @@ describe("#useCachedEffect", () => {
             ${Status.aborted()}
         `(
             "should not fulfill request when there is a cached response of $cachedResult and FetchPolicy.CacheBeforeNetwork",
-            ({cachedResult}) => {
+            ({cachedResult}: any) => {
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
                     cachedResult,
@@ -352,7 +353,7 @@ describe("#useCachedEffect", () => {
             ${Status.aborted()}
         `(
             "should not fulfill request when there is a cached response of $cachedResult and FetchPolicy.CacheOnly",
-            ({cachedResult}) => {
+            ({cachedResult}: any) => {
                 const fakeHandler = jest.fn();
                 jest.spyOn(UseSharedCache, "useSharedCache").mockReturnValue([
                     cachedResult,
@@ -392,7 +393,7 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, waitForNextUpdate} = clientRenderHook(
-                ({requestId}) => useCachedEffect(requestId, fakeHandler),
+                ({requestId}: any) => useCachedEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
@@ -434,15 +435,13 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useCachedEffect(requestId, fakeHandler),
+                ({requestId}: any) => useCachedEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
             );
             rerender({requestId: "ID2"});
-            await act((): Promise<mixed> =>
-                Promise.all([response1, response2]),
-            );
+            await act((): Promise<any> => Promise.all([response1, response2]));
 
             // Assert
             expect(result.all).not.toContainEqual(Status.success("DATA1"));
@@ -459,15 +458,13 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) => useCachedEffect(requestId, fakeHandler),
+                ({requestId}: any) => useCachedEffect(requestId, fakeHandler),
                 {
                     initialProps: {requestId: "ID"},
                 },
             );
             rerender({requestId: "ID2"});
-            await act((): Promise<mixed> =>
-                Promise.all([response1, response2]),
-            );
+            await act((): Promise<any> => Promise.all([response1, response2]));
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA2"));
@@ -493,13 +490,14 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({skip}) => useCachedEffect("ID", fakeHandler, {skip}),
+                ({skip}: any) => useCachedEffect("ID", fakeHandler, {skip}),
                 {
                     initialProps: {skip: false},
                 },
             );
             rerender({skip: true});
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
 
             // Assert
             expect(result.all).not.toContainEqual(Status.success("DATA1"));
@@ -514,15 +512,13 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({handler}) => useCachedEffect("ID", handler),
+                ({handler}: any) => useCachedEffect("ID", handler),
                 {
                     initialProps: {handler: fakeHandler1},
                 },
             );
             rerender({handler: fakeHandler2});
-            await act((): Promise<mixed> =>
-                Promise.all([response1, response2]),
-            );
+            await act((): Promise<any> => Promise.all([response1, response2]));
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA1"));
@@ -535,17 +531,19 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({options}) => useCachedEffect("ID", fakeHandler),
+                ({options}: any) => useCachedEffect("ID", fakeHandler),
                 {
                     initialProps: {options: undefined},
                 },
             );
             rerender({
+                // @ts-expect-error [FEI-5019] - TS2322 - Type '{ scope: string; }' is not assignable to type 'undefined'.
                 options: {
                     scope: "BLAH!",
                 },
             });
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
 
             // Assert
             expect(result.current[0]).toStrictEqual(Status.success("DATA1"));
@@ -566,7 +564,7 @@ describe("#useCachedEffect", () => {
                 result: hookResult,
                 waitForNextUpdate,
             } = clientRenderHook(
-                ({requestId}) =>
+                ({requestId}: any) =>
                     useCachedEffect(requestId, fakeHandler, {
                         retainResultOnChange: true,
                     }),
@@ -574,7 +572,8 @@ describe("#useCachedEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
             rerender({requestId: "ID2"});
             const [result] = hookResult.current;
             await waitForNextUpdate();
@@ -596,7 +595,7 @@ describe("#useCachedEffect", () => {
 
             // Act
             const {rerender, result} = clientRenderHook(
-                ({requestId}) =>
+                ({requestId}: any) =>
                     useCachedEffect(requestId, fakeHandler, {
                         retainResultOnChange: false,
                     }),
@@ -604,7 +603,8 @@ describe("#useCachedEffect", () => {
                     initialProps: {requestId: "ID"},
                 },
             );
-            await act((): Promise<mixed> => response1);
+            // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+            await act((): Promise<unknown> => response1);
             rerender({requestId: "ID2"});
 
             // Assert
@@ -613,7 +613,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should trigger render when request is fulfilled and onResultChanged is undefined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -626,7 +626,8 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                await reactAct((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await reactAct((): Promise<unknown> => response);
 
                 // Assert
                 expect(renderCount).toBe(2);
@@ -635,7 +636,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should trigger render once per inflight request being fulfilled and onResultChanged is undefined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -656,7 +657,8 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                await reactAct((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await reactAct((): Promise<unknown> => response);
 
                 // Assert
                 expect(renderCount).toBe(2);
@@ -665,7 +667,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should not trigger render when request is fulfilled and onResultChanged is defined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -681,7 +683,8 @@ describe("#useCachedEffect", () => {
 
                 // Act
                 render(<Component />);
-                await reactAct((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await reactAct((): Promise<unknown> => response);
 
                 // Assert
                 expect(renderCount).toBe(1);
@@ -690,7 +693,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should call onResultChanged when request is fulfilled and onResultChanged is defined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -703,7 +706,8 @@ describe("#useCachedEffect", () => {
                         fetchPolicy,
                     }),
                 );
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
 
                 // Assert
                 expect(onResultChanged).toHaveBeenCalledWith(
@@ -714,7 +718,7 @@ describe("#useCachedEffect", () => {
 
         it.each(allPoliciesBut(FetchPolicy.CacheOnly))(
             "should call onResultChanged once per inflight request being fulfilled and onResultChanged is defined for FetchPolicy.%s",
-            async (fetchPolicy) => {
+            async (fetchPolicy: any) => {
                 // Arrange
                 const response = Promise.resolve("DATA");
                 const fakeHandler = jest.fn().mockReturnValue(response);
@@ -735,7 +739,8 @@ describe("#useCachedEffect", () => {
                 act(refetch);
                 act(refetch);
                 act(refetch);
-                await act((): Promise<mixed> => response);
+                // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
+                await act((): Promise<unknown> => response);
 
                 // Assert
                 expect(onResultChanged).toHaveBeenCalledTimes(1);

package/src/hooks/__tests__/{use-gql-router-context.test.js → use-gql-router-context.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {renderHook} from "@testing-library/react-hooks";
 
@@ -27,7 +26,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -50,7 +49,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -76,7 +75,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -85,7 +84,7 @@ describe("#useGqlRouterContext", () => {
 
         // Act
         const wrapper = renderHook(
-            ({overrides}) => useGqlRouterContext(overrides),
+            ({overrides}: any) => useGqlRouterContext(overrides),
             {
                 wrapper: Wrapper,
                 initialProps: {},
@@ -106,7 +105,7 @@ describe("#useGqlRouterContext", () => {
             defaultContext: {
                 foo: "bar",
             },
-        };
+        } as const;
         const Wrapper = ({children}: any) => (
             <GqlRouterContext.Provider value={baseContext}>
                 {children}
@@ -115,7 +114,7 @@ describe("#useGqlRouterContext", () => {
 
         // Act
         const wrapper = renderHook(
-            ({overrides}) => useGqlRouterContext(overrides),
+            ({overrides}: any) => useGqlRouterContext(overrides),
             {
                 wrapper: Wrapper,
                 initialProps: {
@@ -124,6 +123,7 @@ describe("#useGqlRouterContext", () => {
             },
         );
         const result1 = wrapper.result.current;
+        // @ts-expect-error [FEI-5019] - TS2741 - Property 'fiz' is missing in type '{}' but required in type '{ fiz: string; }'.
         wrapper.rerender({overrides: {}});
         const result2 = wrapper.result.current;