Test Suite for Provider-Dependent Components

Problem/Feature Description

A development team is building a React application with global state provided through multiple context providers: a ThemeContext for light/dark mode, a BrowserRouter for client-side routing, and an AuthContext for the current user session. Several page-level components depend on all three providers being available in the tree.

The team has been writing tests by manually wrapping each component in all three providers inline for every test. This has become painful — every time a new provider is added, every test file needs updating. A senior developer has proposed a shared testing utility that wraps components automatically. You have been asked to set up this testing infrastructure and write tests for the UserProfilePage component to demonstrate the pattern. The component renders differently depending on authentication state and the current theme.

Output Specification

Create the following files:

• src/test-utils.tsx: The shared test utility that provides the custom render function
• src/AuthContext.tsx: The authentication context implementation
• src/ThemeContext.tsx: The theme context implementation
• src/UserProfilePage.tsx: The page component under test
• src/UserProfilePage.test.tsx: Tests for the page using the custom render utility

The tests should cover at least: rendering the authenticated user's name, and rendering the unauthenticated (logged-out) state. The test file should use the shared testing utility you created.