Skip to content

Latest commit

 

History

History
44 lines (30 loc) · 1.43 KB

no-container.md

File metadata and controls

44 lines (30 loc) · 1.43 KB

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.

This applies to Testing Library frameworks built on top of DOM Testing Library

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');
const view = render(<Example />);
const button = view.container.getElementsByClassName('.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