Merge pull request #21712 from backstage/camilaibs/di-migrate-render-in-test-app

[DI] Start migrating `renderInTestApp` util

.changeset/forty-mirrors-carry.md

@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-test-utils': patch
+---
+
+Migrate `renderInTestApp` to `@backstage/frontend-test-utils` for testing individual React components in an app.

packages/frontend-test-utils/api-report.md

@@ -3,6 +3,8 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+/// <reference types="react" />
+
 import { ErrorWithContext } from '@backstage/test-utils';
 import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { JsonObject } from '@backstage/types';
@@ -63,6 +65,9 @@ export { MockStorageApi };
 
 export { MockStorageBucket };
 
+// @public
+export function renderInTestApp(element: JSX.Element): RenderResult;
+
 export { setupRequestMockHandlers };
 
 export { TestApiProvider };

packages/frontend-test-utils/src/app/index.ts

@@ -18,3 +18,5 @@ export {
   createExtensionTester,
   type ExtensionTester,
 } from './createExtensionTester';
+
+export { renderInTestApp } from './renderInTestApp';

packages/frontend-test-utils/src/app/renderInTestApp.test.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from './renderInTestApp';
+
+describe('renderInTestApp', () => {
+  it('should render the given component in a page', async () => {
+    const Component = () => <div>Test</div>;
+    renderInTestApp(<Component />);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+  });
+});

packages/frontend-test-utils/src/app/renderInTestApp.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  coreExtensionData,
+  createExtension,
+} from '@backstage/frontend-plugin-api';
+import { createExtensionTester } from './createExtensionTester';
+
+/**
+ * @public
+ * Renders the given element in a test app, for use in unit tests.
+ */
+export function renderInTestApp(element: JSX.Element) {
+  const extension = createExtension({
+    namespace: 'test',
+    attachTo: { id: 'core', input: 'root' },
+    output: {
+      element: coreExtensionData.reactElement,
+    },
+    factory: () => ({ element }),
+  });
+  const tester = createExtensionTester(extension);
+  return tester.render();
+}