Fixes AppProxyForm test

Shopify · Jan 8, 2025 · a47415e · a47415e
1 parent 5ea7d0d
commit a47415e
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 77 deletions.
diff --git a/packages/apps/shopify-app-remix/package.json b/packages/apps/shopify-app-remix/package.json
@@ -87,6 +87,7 @@
     "@types/jsonwebtoken": "^9.0.7",
     "@types/react": "^18.3.12",
     "@types/semver": "^7.5.8",
+    "cross-fetch": "^4.1.0",
     "jest-fetch-mock": "^3.0.3",
     "jsonwebtoken": "^9.0.2"
   },

diff --git a/.../apps/shopify-app-remix/src/react/components/AppProxyForm/__tests__/AppProxyForm.test.tsx b/.../apps/shopify-app-remix/src/react/components/AppProxyForm/__tests__/AppProxyForm.test.tsx
@@ -1,5 +1,6 @@
 import {mount} from '@shopify/react-testing';
-import {createRemixStub} from '@remix-run/testing';
+import {createMemoryRouter, RouterProvider} from 'react-router-dom';
+import 'cross-fetch/polyfill';
 
 import '../../../__tests__/test-helper';
 
@@ -19,16 +20,18 @@ describe('<AppProxyForm />', () => {
 
   it('adds a trailing slash if one is missing', () => {
     // WHEN
-    function MyComponent() {
-      return (
-        <AppProxyProvider appUrl="http://my-app.example.io">
-          <AppProxyForm action="/my-action">Hello world</AppProxyForm>
-        </AppProxyProvider>
-      );
-    }
-
-    const RemixStub = createRemixStub([{path: '/', Component: MyComponent}]);
-    const component = mount(<RemixStub />);
+    const router = createMemoryRouter([
+      {
+        path: '/',
+        element: (
+          <AppProxyProvider appUrl="http://my-app.example.io">
+            <AppProxyForm action="/my-action">Hello world</AppProxyForm>
+          </AppProxyProvider>
+        ),
+      },
+    ]);
+
+    const component = mount(<RouterProvider router={router} />);
 
     // THEN
     expect(component).toContainReactComponent('form', {action: '/my-action/'});
@@ -37,16 +40,18 @@ describe('<AppProxyForm />', () => {
 
   it("doesn't alter the action if it has a trailing slash", () => {
     // WHEN
-    function MyComponent() {
-      return (
-        <AppProxyProvider appUrl="http://my-app.example.io">
-          <AppProxyForm action="/my-action/">Hello world</AppProxyForm>
-        </AppProxyProvider>
-      );
-    }
-
-    const RemixStub = createRemixStub([{path: '/', Component: MyComponent}]);
-    const component = mount(<RemixStub />);
+    const router = createMemoryRouter([
+      {
+        path: '/',
+        element: (
+          <AppProxyProvider appUrl="http://my-app.example.io">
+            <AppProxyForm action="/my-action/">Hello world</AppProxyForm>
+          </AppProxyProvider>
+        ),
+      },
+    ]);
+
+    const component = mount(<RouterProvider router={router} />);
 
     // THEN
     expect(component).toContainReactComponent('form', {action: '/my-action/'});