Update API to align with vitest-browser ecosystem

[shairez]

This PR enhances the testing API with updated naming conventions and new features for querying elements.

✨ New Features

• Render Result with Locator Methods: The render result now includes built-in locator methods (getByText, getByRole, getByLabelText, etc.) that query from baseElement (defaults to document.body)

• Container Element: New container property provides direct access to the component's host element (shortcut for fixture.nativeElement)

• Base Element Configuration: New baseElement option allows customizing the root element for queries, essential for testing components with portals/overlays

🔄 Breaking Changes (with deprecation period)

• locator replaces component - Aligns with vitest-browser-vue and other libraries in the ecosystem

  • Old: const { component } = await render(...)
  • New: const { locator } = await render(...)
  • ⚠️ component is deprecated but still works for backward compatibility

• ComponentRenderOptions replaces RenderConfig type - More descriptive naming

  • ⚠️ RenderConfig is deprecated but still works for backward compatibility

📚 Documentation

• Comprehensive documentation updates with clear examples
• Explains when to use locator vs screen query patterns
• Examples updated to use the screen pattern where appropriate

---

Migration: All deprecated properties continue to work. Update at your convenience - simply rename component → locator and RenderConfig → ComponentRenderOptions.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/vitest-community/vitest-browser-angular@18

commit: 9ac828a

[sheremet-va]

Looks good, just a small note

[sheremet-va]

Looks perfect, thank you!