Add createTestEntityPage utility for testing entity extensions

This adds a test utility that simplifies testing entity cards and content
extensions in the new frontend system. The utility creates a test page
that provides EntityProvider context and accepts entity extensions through
input redirects.

Also adds the `apis` option to `renderTestApp` for API overrides, and
includes tests for entity cards in catalog, org, and api-docs plugins.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2026-02-03 00:23:50 +01:00
parent a4d90b2200
commit ac9bead0dc
15 changed files with 1389 additions and 0 deletions
@@ -200,6 +200,38 @@ describe('Index page', () => {
});
```
## Testing entity extensions
The `createTestEntityPage` utility from `@backstage/plugin-catalog-react/testUtils` simplifies testing entity cards and content extensions. It creates a test page that mounts at `/`, provides an `EntityProvider` context, and picks up entity extensions through input redirects.
```tsx
import { screen } from '@testing-library/react';
import { renderTestApp } from '@backstage/frontend-test-utils';
import { createTestEntityPage } from '@backstage/plugin-catalog-react/testUtils';
import { myEntityCard } from './plugin';
describe('MyEntityCard', () => {
it('should render for Component entities', async () => {
const entity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'Component',
metadata: { name: 'my-service' },
spec: { type: 'service', owner: 'team-a' },
};
renderTestApp({
extensions: [createTestEntityPage({ entity }), myEntityCard],
});
expect(await screen.findByText('My Card Title')).toBeInTheDocument();
});
});
```
Entity content extensions can be tested the exact same way, just pass your content extension instead of a card. The test page also supports entity filters defined on the extensions, so you can test filter behavior by providing different entity kinds. If your extension depends on APIs you can pass mock implementation using the `apis` option `renderTestApp`, or you can pass the API extension directly alongside your content extension.
Extensions that use `EntityRefLinks` or `useRelatedEntities` may require additional API mocking using the `apis` option on `renderTestApp`.
## Mounting routes
If your component or extension uses `useRouteRef` to generate links to other routes, you need to mount those routes in the test environment. Both `renderInTestApp` and `renderTestApp` support the `mountedRoutes` option for this purpose.