query-priority

a query reaching for a test id where a role, label or text would find the element

Agent checkadvisory by defaultreacttests

The argument

Query Priority

getByRole — mirrors how users and assistive technology find elements
getByLabelText — labeled form inputs
getByText — visible text
getByTestId — last resort (requires adding data-testid to source)

Use query* variants to assert an element is not rendered (they return null instead of throwing). Use findBy*/waitFor for elements that appear after an async update — a synchronous getBy* throws before the DOM settles.

The proof

failsrc/notifications/DismissButton.unit.test.tsx

import { expect, describe, test } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import { DismissButton } from './DismissButton';

const setupDismissButton = () => {
	render(<DismissButton />);
};

describe('DismissButton', () => {
	test('renders a button users and assistive technology can find', () => {
		setupDismissButton();

		// a test id added to source for the test's convenience, where the button's
		// own role and label would have found it
		const button = screen.getByTestId('dismiss-button');

		expect(button).toBeInTheDocument();
	});
});

passsrc/notifications/DismissButton.unit.test.tsx

import { expect, describe, test } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import { DismissButton } from './DismissButton';

const setupDismissButton = () => {
	render(<DismissButton />);
};

describe('DismissButton', () => {
	test('renders a button users and assistive technology can find', () => {
		setupDismissButton();

		const button = screen.getByRole('button', { name: /dismiss/i });

		expect(button).toBeInTheDocument();
	});
});

Turn it down

Both lines go in your lightsout.config.json.

"standards-checks": { "query-priority": "advisory" }

"standards-checks": { "query-priority": "off" }