no-container.md

Disallow the use of container methods (no-container)

By using container methods like .querySelector you may lose a lot of the confidence that the user can really interact with your UI. Also, the test becomes harder to read, and it will break more frequently.

Rule Details

This rule aims to disallow the use of container methods in your tests.

Examples of incorrect code for this rule:

const { container } = render(<Example />);
const button = container.querySelector('.btn-primary');

const { container: alias } = render(<Example />);
const button = alias.querySelector('.btn-primary');

Examples of correct code for this rule:

render(<Example />);
screen.getByRole('button', { name: /click me/i });

If you use custom render functions then you can set a config option in your .eslintrc to look for these.

   "testing-library/no-container": ["error", {"renderFunctions":["renderWithRedux", "renderWithRouter"]}],

Further Reading

• querying with screen