what is the best way to load environment variables?

[trevorpfiz]

Am I supposed to load in all of these providers? Maybe I am not doing this right, but I would need to load in some env vars to use the ClerkProvider for example?

import "@shopify/flash-list/jestSetup";

import type { RenderOptions } from "@testing-library/react-native";
import type { ReactElement } from "react";
import React from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
  initialWindowMetrics,
  SafeAreaProvider,
} from "react-native-safe-area-context";
import { ClerkProvider } from "@clerk/clerk-expo";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import { NavigationContainer } from "@react-navigation/native";
import { render } from "@testing-library/react-native";

import { TRPCProvider } from "~/utils/api";
import { tokenCache } from "~/utils/cache";

// Mock environment variables for testing
process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY =
  "pk_test_Y2hlZXJmdW...";

const createAppWrapper = () => {
  return ({ children }: { children: React.ReactNode }) => (
    <ClerkProvider
      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY ?? ""}
      tokenCache={tokenCache}
    >
      <TRPCProvider>
        <GestureHandlerRootView style={{ flex: 1 }}>
          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
            <BottomSheetModalProvider>
              <NavigationContainer>{children}</NavigationContainer>
            </BottomSheetModalProvider>
          </SafeAreaProvider>
        </GestureHandlerRootView>
      </TRPCProvider>
    </ClerkProvider>
  );
};

const customRender = (
  ui: ReactElement,
  options?: Omit<RenderOptions, "wrapper">,
) => {
  const Wrapper = createAppWrapper(); // make sure we have a new wrapper for each render
  return render(ui, { wrapper: Wrapper, ...options });
};

export * from "@testing-library/react-native";
export { customRender as render };

[mdjastrzebski]

Your use case is not clear. What are you trying to achieve?

In general it's not a bad thing to load a lot of providers, if that's what you do in the real app, then you should probably do it for the tests as well, this way your tests with resemble the real app.

As for env vars, you could try to pass them through Jest invocation, e.g. EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_Y2hlZXJmdW..." jest.