diff --git a/src/components/__tests__/codeBlock.test.js b/src/components/__tests__/codeBlock.test.js
new file mode 100644
index 00000000000000..b552b287d3b52f
--- /dev/null
+++ b/src/components/__tests__/codeBlock.test.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import {CodeWrapper} from '../codeBlock';
+import {CodeContextProvider, DEFAULTS} from '../codeContext';
+
+jest.mock('../hooks/usePlatform');
+
+describe('CodeWrapper', () => {
+  it('renders without placeholder', () => {
+    const tree = renderer
+      .create(
+        <CodeContextProvider fetcher={() => DEFAULTS}>
+          <CodeWrapper>process.env.MY_ENV = 'foo'</CodeWrapper>
+        </CodeContextProvider>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  /*  it('renders with placeholder', () => {
+    const tree = renderer
+      .create(<CodeWrapper>process.env.MY_ENV = ___ORG_SLUG___</CodeWrapper>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with placeholder in middle of text', () => {
+    const tree = renderer
+      .create(
+        <CodeWrapper>process.env.MY_ENV = https://___ORG_SLUG___.sentry.io</CodeWrapper>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders org auth token placeholder', () => {
+    const tree = renderer
+      .create(<CodeWrapper>process.env.MY_ENV = ___ORG_AUTH_TOKEN___</CodeWrapper>)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders multiple placeholders', () => {
+    const tree = renderer
+      .create(
+        <CodeWrapper>
+          process.env.MY_ENV = ___ORG_SLUG___ + ___PROJECT_SLUG___
+        </CodeWrapper>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  }); */
+});
diff --git a/src/components/basePage.tsx b/src/components/basePage.tsx
index e174e79a034237..caa0c4817ef769 100644
--- a/src/components/basePage.tsx
+++ b/src/components/basePage.tsx
@@ -3,7 +3,7 @@ import React, {Fragment, useRef} from 'react';
 import {getCurrentTransaction} from '../utils';
 
 import {Banner} from './banner';
-import {CodeContext, useCodeContextState} from './codeContext';
+import {CodeContextProvider} from './codeContext';
 import {GitHubCTA} from './githubCta';
 import {Layout} from './layout';
 import {SEO} from './seo';
@@ -77,9 +77,7 @@ export function BasePage({
         >
           <h1 className="mb-3">{title}</h1>
           <div id="main" ref={contentRef}>
-            <CodeContext.Provider value={useCodeContextState()}>
-              {children}
-            </CodeContext.Provider>
+            <CodeContextProvider>{children}</CodeContextProvider>
 
             {file && (
               <GitHubCTA
diff --git a/src/components/codeContext.tsx b/src/components/codeContext.tsx
index 5156de3cc05dd5..03937584f07442 100644
--- a/src/components/codeContext.tsx
+++ b/src/components/codeContext.tsx
@@ -59,7 +59,7 @@ type UserApiResult = {
 // only fetch them once
 let cachedCodeKeywords: CodeKeywords | null = null;
 
-const DEFAULTS: CodeKeywords = {
+export const DEFAULTS: CodeKeywords = {
   PROJECT: [
     {
       DSN: 'https://examplePublicKey@o0.ingest.sentry.io/0',
@@ -240,21 +240,29 @@ export async function createOrgAuthToken({
   }
 }
 
-export function useCodeContextState(fetcher = fetchCodeKeywords): CodeContextType {
+export function CodeContextProvider({
+  children,
+  fetcher,
+}: {
+  children: React.ReactNode;
+  fetcher?: () => Promise<CodeKeywords>;
+}) {
   const [codeKeywords, setCodeKeywords] = useState(cachedCodeKeywords ?? DEFAULTS);
 
   const [isLoading, setIsLoading] = useState<boolean>(cachedCodeKeywords ? false : true);
 
+  const _fetcher = fetcher || fetchCodeKeywords;
+
   useEffect(() => {
     if (cachedCodeKeywords === null) {
       setIsLoading(true);
-      fetcher().then((config: CodeKeywords) => {
+      _fetcher().then((config: CodeKeywords) => {
         cachedCodeKeywords = config;
         setCodeKeywords(config);
         setIsLoading(false);
       });
     }
-  }, [setIsLoading, setCodeKeywords, fetcher]);
+  }, [setIsLoading, setCodeKeywords, _fetcher]);
 
   // sharedKeywordSelection maintains a global mapping for each "keyword"
   // namespace to the index of the selected item.
@@ -273,5 +281,5 @@ export function useCodeContextState(fetcher = fetchCodeKeywords): CodeContextTyp
     isLoading,
   };
 
-  return result;
+  return <CodeContext.Provider value={result}>{children}</CodeContext.Provider>;
 }