How to fix Container type is not a DOM element, string provided instead in React

// ✅ Correct - screen queries are already bound to document.body
const element = screen.getByText('Submit');
const button = screen.getByRole('button', { name: 'Save' });

// ❌ Incorrect - don't pass container to screen queries
const element = screen.getByText(document.body, 'Submit');
const button = screen.getByRole('#app', 'button', { name: 'Save' });

import { getByText } from '@testing-library/dom';

// ✅ Correct - pass DOM element
const container = document.querySelector('#app');
if (container) {
  const element = getByText(container, 'Submit');
}

// ❌ Incorrect - passing string selector
const element = getByText('#app', 'Submit'); // Error: string instead of DOM element

// ✅ Also correct with render() return value
const { container } = render(<MyComponent />);
const element = getByText(container, 'Submit');

import { within } from '@testing-library/dom';

// ✅ Correct - pass DOM element to within()
const container = document.querySelector('#app');
const { getByText } = within(container);
const element = getByText('Submit');

// ✅ Also correct with render() result
const { getByText } = within(container); // container from render()

// ❌ Incorrect - passing string to within()
const { getByText } = within('#app'); // Error: string passed

// ✅ Using within with screen for scoped queries
const modal = screen.getByRole('dialog');
const { getByText: getByTextInModal } = within(modal);
const button = getByTextInModal('Close');

import { render } from '@testing-library/react';

// ✅ Correct usage
const { container, getByText } = render(<MyComponent />);

// Option 1: Use bound queries (container is already bound)
const element = getByText('Submit');

// Option 2: Use container for scoped queries
const innerElement = getByText(container, 'Submit');

// Option 3: Use screen for document queries
const screenElement = screen.getByText('Global element');

// ❌ Common mistake - passing container string
const wrong = getByText('#root', 'Submit'); // Error

// ✅ Proper pattern with multiple containers
const { container: container1 } = render(<Component1 />);
const { container: container2 } = render(<Component2 />);
const element1 = getByText(container1, 'Text 1');
const element2 = getByText(container2, 'Text 2');

import { screen } from '@testing-library/react';
   const element = screen.getByText('Text');

import { getByText } from '@testing-library/dom';
   const element = getByText(container, 'Text');

import { within } from '@testing-library/dom';
   const { getByText } = within(container);
   const element = getByText('Text');

// ❌ Problem: String selector with getByText
const element = getByText('#app', 'Submit');

// ✅ Fix: Get DOM element first
const container = document.querySelector('#app');
const element = getByText(container, 'Submit');

// ❌ Problem: Passing container to screen query
const element = screen.getByText(container, 'Submit');

// ✅ Fix: Use either screen or container-based query
const element = screen.getByText('Submit'); // OR
const element = getByText(container, 'Submit');

// ❌ Problem: within() with string
const { getByText } = within('#modal');

// ✅ Fix: Get DOM element first
const modal = document.querySelector('#modal');
const { getByText } = within(modal);

// ❌ Problem: Null container from querySelector
const container = document.querySelector('.not-exist');
const element = getByText(container, 'Text'); // container is null!

// ✅ Fix: Check for null
const container = document.querySelector('.not-exist');
if (container) {
  const element = getByText(container, 'Text');
}