fix: Throw a better error message if context is null (#192)

Now throws an error message if context is not set.

Author: dbasilio

src/FlagContext.ts

@@ -17,6 +17,6 @@ export interface IFlagContextValue
   >;
 }
 
-const FlagContext = React.createContext<IFlagContextValue>(null as never);
+const FlagContext = React.createContext<IFlagContextValue | null>(null);
 
 export default FlagContext;

src/FlagProvider.test.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import { type Mock } from 'vitest';
 import { UnleashClient, type IVariant, EVENTS } from 'unleash-proxy-client';
 import FlagProvider from './FlagProvider';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 import '@testing-library/jest-dom';
 
 const getVariantMock = vi.fn().mockReturnValue('A');
@@ -44,8 +44,7 @@ vi.mock('unleash-proxy-client', async (importOriginal) => {
 const noop = () => {};
 
 const FlagConsumerAfterClientInit = () => {
-  const { updateContext, isEnabled, getVariant, client, on } =
-    useContext(FlagContext);
+  const { updateContext, isEnabled, getVariant, client, on } = useFlagContext();
   const [enabled, setIsEnabled] = useState(false);
   const [variant, setVariant] = useState<IVariant | null>(null);
   const [context, setContext] = useState<any>('nothing');
@@ -71,8 +70,7 @@ const FlagConsumerAfterClientInit = () => {
 };
 
 const FlagConsumerBeforeClientInit = () => {
-  const { updateContext, isEnabled, getVariant, client, on } =
-    useContext(FlagContext);
+  const { updateContext, isEnabled, getVariant, client, on } = useFlagContext();
   const [enabled, setIsEnabled] = useState(false);
   const [variant, setVariant] = useState<IVariant | null>(null);
   const [context, setContext] = useState<any>('nothing');
@@ -162,8 +160,7 @@ test('A memoized consumer should not rerender when the context provider values a
   const renderCounter = vi.fn();
 
   const MemoizedConsumer = React.memo(() => {
-    const { updateContext, isEnabled, getVariant, client, on } =
-      useContext(FlagContext);
+    const { updateContext, isEnabled, getVariant, client, on } = useFlagContext();
 
     renderCounter();
 

src/integration.test.tsx

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { EVENTS, UnleashClient } from 'unleash-proxy-client';
 import FlagProvider from './FlagProvider';
 import useFlagsStatus from './useFlagsStatus';
 import { act } from 'react-dom/test-utils';
 import useFlag from './useFlag';
+import { useFlagContext } from './useFlagContext';
 import useVariant from './useVariant';
-import FlagContext from './FlagContext';
 
 const fetchMock = vi.fn(async () => {
   return Promise.resolve({
@@ -89,7 +89,7 @@ test('should render toggles', async () => {
 
 test('should be ready from the start if bootstrapped', () => {
   const Component = React.memo(() => {
-    const { flagsReady } = useContext(FlagContext);
+    const { flagsReady } = useFlagContext();
 
     return <>{flagsReady ? 'ready' : ''}</>;
   });
@@ -183,7 +183,7 @@ test('should render limited times when bootstrapped', async () => {
 
   const Component = () => {
     const enabled = useFlag('test-flag');
-    const { flagsReady } = useContext(FlagContext);
+    const { flagsReady } = useFlagContext();
 
     renders += 1;
 
@@ -229,7 +229,7 @@ test('should resolve values before setting flagsReady', async () => {
 
   const Component = () => {
     const enabled = useFlag('test-flag');
-    const { flagsReady } = useContext(FlagContext);
+    const { flagsReady } = useFlagContext();
 
     renders += 1;
 

src/useFlag.ts

@@ -1,8 +1,8 @@
-import { useContext, useEffect, useState, useRef } from 'react';
-import FlagContext from './FlagContext';
+import { useEffect, useState, useRef } from 'react';
+import { useFlagContext } from './useFlagContext';
 
 const useFlag = (featureName: string) => {
-  const { isEnabled, client } = useContext(FlagContext);
+  const  { isEnabled, client }  = useFlagContext();
   const [flag, setFlag] = useState(!!isEnabled(featureName));
   const flagRef = useRef<typeof flag>();
   flagRef.current = flag;

src/useFlagContext.test.ts

@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react-hooks/native';
+import FlagProvider from "./FlagProvider";
+import { useFlagContext } from "./useFlagContext";
+
+test("throws an error if used outside of a FlagProvider", () => {
+    const { result } = renderHook(() => useFlagContext());
+    
+    expect(result.error).toEqual(
+        Error("This hook must be used within a FlagProvider")
+    );
+});
+
+test("does not throw an error if used inside of a FlagProvider", () => {
+    const { result } = renderHook(() => useFlagContext(), { wrapper: FlagProvider });
+    
+    expect(result.error).toBeUndefined();
+});

src/useFlagContext.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import FlagContext from './FlagContext';
+
+export function useFlagContext() {
+    const context = useContext(FlagContext);
+    if (!context) {
+      throw new Error('This hook must be used within a FlagProvider');
+    }
+    return context;
+}

src/useFlags.ts

@@ -1,8 +1,8 @@
-import { useContext, useEffect, useState } from 'react';
-import FlagContext from './FlagContext';
+import { useEffect, useState } from 'react';
+import { useFlagContext } from './useFlagContext';
 
 const useFlags = () => {
-  const { client } = useContext(FlagContext);
+  const { client } = useFlagContext();
   const [flags, setFlags] = useState(client.getAllToggles());
 
   useEffect(() => {

src/useFlagsStatus.ts

@@ -1,10 +1,8 @@
 /** @format */
-
-import { useContext } from 'react';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 const useFlagsStatus = () => {
-  const { flagsReady, flagsError } = useContext(FlagContext);
+  const { flagsReady, flagsError } = useFlagContext();
 
   return { flagsReady, flagsError };
 };

src/useUnleashClient.ts

@@ -1,8 +1,7 @@
-import { useContext } from 'react';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 const useUnleashClient = () => {
-  const { client } = useContext(FlagContext);
+  const { client } = useFlagContext();
   return client;
 };
 

src/useUnleashContext.ts

@@ -1,8 +1,7 @@
-import { useContext } from 'react';
-import FlagContext from './FlagContext';
+import { useFlagContext } from './useFlagContext';
 
 const useUnleashContext = () => {
-  const { updateContext } = useContext(FlagContext);
+  const { updateContext } = useFlagContext();
 
   return updateContext;
 };