Fix act(...) warnings in DirPicker tests

[josh-padnick]

Description

The DirPicker test suite generates React Testing Library warnings about state updates not being wrapped in act(...). While the tests still pass, these warnings indicate potential test reliability issues and should be addressed.

Current Warnings

stderr | src/components/mdx/DirPicker/__tests__/DirPicker.test.tsx > DirPicker > renders without waiting state when rootDir is provided
An update to DirPicker inside a test was not wrapped in act(...).

When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://react.dev/link/wrap-tests-with-act

Location

• File: web/src/components/mdx/DirPicker/__tests__/DirPicker.test.tsx
• Multiple test cases affected (at least 4 instances)

Root Cause

The DirPicker component likely has async state updates (from useEffect, async operations, or timers) that complete after the initial render. The tests aren't waiting for these updates to settle before asserting on the output.

Reproduction

cd web
bun run test DirPicker

Look for stderr warnings about act(...).

Acceptance Criteria

• All DirPicker tests run without act(...) warnings
• Tests still pass
• Async state updates are properly awaited using waitFor, findBy* queries, or explicit act() wrappers

Technical Notes

Common fixes:

1. Use findBy* queries instead of getBy* for elements that appear asynchronously
2. Wrap async operations in waitFor(() => { ... })
3. Use act(async () => { ... }) for programmatic state updates in tests
4. Add await screen.findBy*() after rendering to wait for async effects

Related

This issue was discovered during testing of the template-resolved ::cli_runbook_source keyword fix, but is a pre-existing issue unrelated to those changes.