CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/testing-library-patterns

Testing Library patterns for React component testing — queries, user events,

99

1.03x
Quality

99%

Does it follow best practices?

Impact

100%

1.03x

Average score across 8 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

Evaluation results

100%

Checkout Form Tests

User event interactions

Criteria
Without context
With context

userEvent import

100%

100%

userEvent.setup() call

100%

100%

No fireEvent usage

100%

100%

Async user actions

100%

100%

getByRole or getByLabelText for inputs

100%

100%

getByRole for buttons

100%

100%

No CSS selectors

100%

100%

No implementation detail assertions

100%

100%

render and screen imports

100%

100%

jest-dom matchers

100%

100%

100%

2%

Product Catalogue Page Tests

Async content and error states

Criteria
Without context
With context

findBy* for async data

86%

100%

Loading state assertion

100%

100%

Loading state gone after data

100%

100%

queryBy* for absent elements

100%

100%

Error state tested

100%

100%

Error state uses findBy* or waitFor

100%

100%

No implementation detail assertions

100%

100%

No container.innerHTML

100%

100%

Accessible queries used

100%

100%

render and screen imports

100%

100%

100%

6%

Restaurant Menu Component Tests

Query priority and accessibility

Criteria
Without context
With context

getByRole preferred

100%

100%

getByLabelText for form fields

100%

100%

No querySelector usage

100%

100%

No wrapper.find component selectors

100%

100%

No container.innerHTML assertion

100%

100%

getByTestId only as last resort

100%

100%

No implementation detail assertions

100%

100%

jest-dom matchers used

100%

100%

Regex matchers for text

0%

100%

render and screen imports

100%

100%

100%

8%

Dashboard Navigation and Footer Link Tests

within() scoped queries

Criteria
Without context
With context

within() import

100%

100%

within() on nav

100%

100%

within() on footer

100%

100%

within() on table row

100%

100%

No ambiguous screen queries for duplicates

100%

100%

getByRole for navigation container

100%

100%

getByRole for links

100%

100%

getByRole for buttons

100%

100%

Regex name matchers

0%

100%

No querySelector usage

100%

100%

100%

Modal Dialog and Tooltip Visibility Tests

toBeVisible vs toBeInTheDocument

Criteria
Without context
With context

toBeVisible() for visible dialog

100%

100%

not.toBeVisible() for hidden dialog

100%

100%

toBeVisible() for tooltip

100%

100%

not.toBeVisible() for hidden tooltip

100%

100%

No toBeInTheDocument() for visibility checks

100%

100%

getByRole for dialog

100%

100%

getByRole for tooltip

100%

100%

userEvent.setup() before render

100%

100%

Awaited user actions

100%

100%

No fireEvent usage

100%

100%

100%

Test Suite for Provider-Dependent Components

Custom render wrapper for providers

Criteria
Without context
With context

test-utils.tsx created

100%

100%

customRender wraps with providers

100%

100%

Re-exports from @testing-library/react

100%

100%

customRender exported as render

100%

100%

Test imports from test-utils

100%

100%

No direct @testing-library/react render import in test

100%

100%

AllProviders wrapper component

100%

100%

getByRole used in tests

100%

100%

Regex name matchers in tests

100%

100%

No implementation detail assertions

100%

100%

100%

Search Results Filter Component Tests

Regex matchers and query selection

Criteria
Without context
With context

getByLabelText for text input

100%

100%

getByRole for checkboxes

100%

100%

getByRole for combobox/select

100%

100%

getByRole for submit button

100%

100%

Regex for input name

100%

100%

Regex for checkbox name

100%

100%

Regex for button name

100%

100%

No getByTestId usage

100%

100%

No querySelector usage

100%

100%

userEvent.setup() before render

100%

100%

Awaited user actions

100%

100%

No fireEvent usage

100%

100%

100%

8%

Notification Dismissal Component Tests

queryBy* for absence and waitFor assertions

Criteria
Without context
With context

queryBy* for dismissed notification

100%

100%

not.toBeInTheDocument() after dismiss

100%

100%

queryBy* for empty state check

100%

100%

No getBy* for absence

100%

100%

waitFor assertions only

100%

100%

userEvent.setup() before render

100%

100%

Awaited user actions

100%

100%

getByRole for buttons

100%

100%

Regex for query names

0%

100%

No querySelector usage

100%

100%

Evaluated
Agent
Claude Code
Model
Claude Sonnet 4.6

Table of Contents