This error occurs when you pass an invalid container type to React Testing Library queries or render functions. The container must be a valid DOM Element, Document, or DocumentFragment, but you're providing something else like null, undefined, a string, or an incorrect object type.
React Testing Library requires a valid DOM container to render components into and query elements from. When you pass an invalid container (not an Element, Document, or DocumentFragment), the library cannot establish a proper testing environment. This error typically happens when manually creating containers incorrectly, using the wrong API methods, or passing containers that have been unmounted or are no longer in the DOM.
When creating a custom container, make sure it's a proper DOM element appended to the document:
// Correct way to create a container
const container = document.createElement('div');
document.body.appendChild(container);
// Use it with render
const { unmount } = render(<MyComponent />, { container });
// Clean up after test
unmount();
document.body.removeChild(container);Never pass null, undefined, or strings as containers.
React Testing Library automatically creates a container for you. Avoid custom containers unless absolutely necessary:
// Usually you don't need a custom container
const { getByText } = render(<MyComponent />);
const element = getByText('Submit');
// Only use custom containers for specific edge cases
const table = document.createElement('table');
document.body.appendChild(table);
render(<TableBody />, { container: table });Most tests work fine with the default container.
Ensure your container reference exists and is valid:
// BAD: container might be null
const container = document.querySelector('.non-existent');
render(<MyComponent />, { container }); // Error!
// GOOD: check for existence
const container = document.querySelector('.my-container');
if (!container) {
throw new Error('Container not found');
}
render(<MyComponent />, { container });
// BETTER: create container if it doesn't exist
let container = document.querySelector('.my-container');
if (!container) {
container = document.createElement('div');
container.className = 'my-container';
document.body.appendChild(container);
}Once a component is unmounted, its container might become invalid. Don't reuse containers:
// BAD: reusing unmounted container
const container = document.createElement('div');
document.body.appendChild(container);
const { unmount } = render(<Component1 />, { container });
unmount();
// This will fail - container was cleaned up
render(<Component2 />, { container });
// GOOD: create fresh container for each test
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});Prefer screen queries which use document.body as the default container:
// BAD: might have container issues
const { container } = render(<MyComponent />);
const element = getByText(container, 'Submit');
// GOOD: use screen which is always available
render(<MyComponent />);
const element = screen.getByText('Submit');
// Also GOOD: use destructured queries from render
const { getByText } = render(<MyComponent />);
const element = getByText('Submit');screen queries avoid container reference issues entirely.
This error highlights an important Testing Library principle: test like a user. Users don't interact with containers or DOM nodes directly—they interact with rendered UI. If you find yourself needing custom containers frequently, reconsider your testing approach. Most components should be testable with the default container. The error also serves as a type safety check—TypeScript can catch many of these issues if you have proper type definitions. For complex cases like testing within iframes or shadow DOM, you may need custom containers, but ensure they're properly set up with valid DOM elements.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite