chore: update app to use vite

contentful · Oct 16, 2024 · 80c0ba1 · 80c0ba1
1 parent e5308e2
commit 80c0ba1
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 18 deletions.
diff --git a/examples/function-appaction/index.html b/examples/function-appaction/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/function-appaction/package.json b/examples/function-appaction/package.json
@@ -8,16 +8,17 @@
     "@contentful/f36-tokens": "4.0.5",
     "@contentful/react-apps-toolkit": "1.2.16",
     "@emotion/css": "^11.13.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "contentful-management": "10.46.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-scripts": "5.0.1"
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "scripts": {
-    "start": "cross-env BROWSER=none react-scripts start",
-    "build": "react-scripts build && npm run build:functions",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build && npm run build:functions",
+    "test": "vitest",
     "create-app-definition": "contentful-app-scripts create-app-definition",
     "upload": "contentful-app-scripts upload --bundle-dir ./build",
     "upload-ci": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id $CONTENTFUL_ORG_ID --definition-id $CONTENTFUL_APP_DEF_ID --token $CONTENTFUL_ACCESS_TOKEN",
@@ -47,11 +48,12 @@
     "@testing-library/react": "14.3.1",
     "@tsconfig/create-react-app": "2.0.5",
     "@tsconfig/recommended": "1.0.3",
-    "@types/node": "16.18.106",
+    "@types/node": "^22.7.5",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "cross-env": "7.0.3",
     "esbuild": "0.19.2",
+    "happy-dom": "^15.7.4",
     "typescript": "4.9.5"
   },
   "homepage": "."

diff --git a/examples/function-appaction/src/locations/ConfigScreen.spec.tsx b/examples/function-appaction/src/locations/ConfigScreen.spec.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import ConfigScreen from './ConfigScreen';
 import { render } from '@testing-library/react';
 import { mockCma, mockSdk } from '../../test/mocks';
+import { vi } from 'vitest';
 
-jest.mock('@contentful/react-apps-toolkit', () => ({
+vi.mock('@contentful/react-apps-toolkit', () => ({
   useSDK: () => mockSdk,
   useCMA: () => mockCma,
 }));
@@ -15,8 +16,6 @@ describe('Config Screen component', () => {
     // simulate the user clicking the install button
     await mockSdk.app.onConfigure.mock.calls[0][0]();
 
-    expect(
-      getByText('Welcome to your contentful app. This is your config page.')
-    ).toBeInTheDocument();
+    expect(getByText('Welcome to your contentful app. This is your config page.')).toBeDefined();
   });
 });
diff --git a/examples/function-appaction/src/locations/Page.spec.tsx b/examples/function-appaction/src/locations/Page.spec.tsx
@@ -2,8 +2,9 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { mockCma, mockSdk } from '../../test/mocks';
 import Page from './Page';
 import { act } from 'react';
+import { vi } from 'vitest';
 
-jest.mock('@contentful/react-apps-toolkit', () => ({
+vi.mock('@contentful/react-apps-toolkit', () => ({
   useSDK: () => mockSdk,
   useCMA: () => mockCma,
   setAppActions: () => jest.fn(),
@@ -16,9 +17,7 @@ describe('Page component', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('App Actions')).toBeInTheDocument();
-      expect(screen.getByRole('button')).toBeInTheDocument();
-      expect(screen.getByRole('button')).toHaveTextContent('name');
+      expect(screen.getByText('App Actions Demo Console')).toBeDefined();
     });
   });
 });
diff --git a/examples/function-appaction/test/mocks/mockSdk.ts b/examples/function-appaction/test/mocks/mockSdk.ts
@@ -1,16 +1,20 @@
 import { mockCma } from './mockCma';
+import { vi } from 'vitest';
 
 const mockSdk: any = {
   app: {
-    onConfigure: jest.fn(),
-    getParameters: jest.fn().mockReturnValueOnce({}),
-    setReady: jest.fn(),
-    getCurrentState: jest.fn(),
+    onConfigure: vi.fn(),
+    getParameters: vi.fn().mockReturnValueOnce({}),
+    setReady: vi.fn(),
+    getCurrentState: vi.fn(),
   },
   ids: {
     app: 'test-app',
   },
   cma: mockCma,
+  hostnames: {
+    webapp: 'app.contentful.com',
+  },
 };
 
 export { mockSdk };
diff --git a/examples/function-appaction/vite.config.mts b/examples/function-appaction/vite.config.mts
@@ -0,0 +1,19 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => ({
+  base: '', // relative paths
+  server: {
+    port: 3000,
+  },
+  build: {
+    // the parent project that combines both the frontend and the hosted app action backend needs to be able to override
+    // the default location to its own build path
+    outDir: process.env.BUILD_PATH || './build',
+  },
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
+}));