🎨 Advanced Component Rendering

Production patterns for rendering components in tests.

Custom Render Wrapper

function renderWithRedux(component, initialState = {}) {
  return render(
    <Provider store={createStore(initialState)}>
      {component}
    </Provider>
  );
}

test('renders with Redux', () => {
  renderWithRedux(<UserProfile />, { user: { name: 'Alice' } });
  expect(screen.getByText('Alice')).toBeInTheDocument();
});

Testing Portals

test('renders portal content', () => {
  render(<Modal isOpen={true} />);
  expect(screen.getByText('Modal Content')).toBeInTheDocument();
});

Rendering Multiple Components

test('renders component tree', () => {
  render(
    <UserProvider>
      <UserProfile />
      <UserSettings />
    </UserProvider>
  );
  
  expect(screen.getByText('Profile')).toBeInTheDocument();
  expect(screen.getByText('Settings')).toBeInTheDocument();
});

✅ Key Takeaways

• Create **custom render** wrappers for providers

• Test **portals** separately if needed

• Test **component trees** together

• Use **setup files** for common configurations