app,cli/templates: better mocking of app config in test

packages/app/package.json

@@ -15,6 +15,7 @@
     "@backstage/plugin-sentry": "^0.1.1-alpha.9",
     "@backstage/plugin-tech-radar": "^0.1.1-alpha.9",
     "@backstage/plugin-welcome": "^0.1.1-alpha.9",
+    "@backstage/test-utils": "^0.1.1-alpha.9",
     "@backstage/theme": "^0.1.1-alpha.9",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",

packages/app/src/App.test.tsx

@@ -15,23 +15,24 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
 import App from './App';
 
 describe('App', () => {
-  beforeAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      value: jest.fn(() => {
-        return {
-          matches: true,
-          addListener: jest.fn(),
-          removeListener: jest.fn(),
-        };
-      }),
+  it('should render', async () => {
+    Object.defineProperty(process.env, 'APP_CONFIG', {
+      configurable: true,
+      value: [
+        {
+          data: {
+            app: { title: 'Test' },
+          },
+          context: 'test',
+        },
+      ],
     });
-  });
-  it('should render', () => {
-    const rendered = render(<App />);
+
+    const rendered = await renderWithEffects(<App />);
     expect(rendered.baseElement).toBeInTheDocument();
   });
 });

packages/cli/templates/default-app/packages/app/package.json.hbs

@@ -8,6 +8,7 @@
     "@material-ui/lab": "4.0.0-alpha.45",
     "@backstage/cli": "^{{version}}",
     "@backstage/core": "^{{version}}",
+    "@backstage/test-utils": "^{{version}}",
     "@backstage/theme": "^{{version}}",
     "plugin-welcome": "0.0.0",
     "react": "^16.13.1",

packages/cli/templates/default-app/packages/app/src/App.test.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { renderWithEffects } from '@backstage/test-utils';
 import App from './App';
 
 describe('App', () => {
-  it('should render', () => {
+  it('should render', async () => {
     Object.defineProperty(process.env, 'APP_CONFIG', {
       configurable: true,
-      value: [],
+      value: [
+        {
+          data: {
+            app: { title: 'Test' },
+          },
+          context: 'test',
+        },
+      ],
     });
 
-    const rendered = render(<App />);
+    const rendered = await renderWithEffects(<App />);
     expect(rendered.baseElement).toBeInTheDocument();
   });
 });