When writing tests, ensure your assertions thoroughly verify all relevant aspects of the functionality being tested. Go beyond the basic "happy path" checks and include assertions that verify:
When writing tests, ensure your assertions thoroughly verify all relevant aspects of the functionality being tested. Go beyond the basic “happy path” checks and include assertions that verify:
Example 1: When testing a component that shouldn’t render certain elements:
// Instead of only checking that one text element isn't present:
expect(
screen.queryByText('Select from one of these suggestions')
).not.toBeInTheDocument();
// Also verify that no suggestion elements are rendered:
expect(screen.queryByText(/https:\/\/github\.com/)).not.toBeInTheDocument();
Example 2: When testing tabular data, verify column ordering:
// Don't just check that columns exist
expect(screen.getByText('http request_method')).toBeInTheDocument();
expect(screen.getByText('count span.duration')).toBeInTheDocument();
// Also verify the columns appear in the expected order
const headers = screen.getAllByRole('columnheader');
expect(headers[0].textContent).toBe('http request_method');
expect(headers[1].textContent).toBe('count span.duration');
Example 3: Use realistic test data rather than undefined values:
// Instead of letting values be undefined in tests
expect(screen.getByText('/settings/')).toHaveAttribute(
'href',
'/organizations/org-slug/traces/trace/undefined/?referrer=breadcrumbs'
);
// Provide valid mock data
const traceId = 'abcd1234efgh5678';
expect(screen.getByText('/settings/')).toHaveAttribute(
'href',
`/organizations/org-slug/traces/trace/${traceId}/?referrer=breadcrumbs`
);
Comprehensive assertions make tests more meaningful by ensuring they actually verify the intended behavior, catch regressions, and serve as documentation of expected functionality.
Enter the URL of a public GitHub repository