🔍 Advanced Element Querying

Complex querying patterns for production tests.

Within Queries

test('finds element within parent', () => {
  render(<Form />);
  
  const form = screen.getByRole('form');
  const input = within(form).getByLabelText('Email');
  
  expect(input).toBeInTheDocument();
});

Complex Role Queries

test('queries with accessible name', () => {
  render(<Navigation />);
  
  const links = screen.getAllByRole('link');
  const profileLink = links.find(link => link.textContent === 'Profile');
  
  expect(profileLink).toBeInTheDocument();
});

Combining Queries

test('uses multiple query strategies', () => {
  render(<Dashboard />);
  
  const button = screen.getByRole('button', { name: /submit/i });
  const parent = button.closest('[data-testid="form"]');
  const inputs = within(parent).getAllByRole('textbox');
  
  expect(inputs).toHaveLength(3);
});

✅ Key Takeaways

• Use **within()** for scoped queries

• Combine **multiple queries** for complex scenarios

• Prefer **accessible names** over indices

• Build queries **progressively**