Mocking app-bridge-react's Provider component

afleischer
New Member
3 0 4

My team and I are developing an embedded application using Polaris. I am in the process of setting up our testing suite in the app and have run into an issue trying to mock app bridge's context providing component. 

 

The app does not correctly run if the app-bridge-react Provider component is not present. 

 

For non-embedded apps, Shopify has provided a "PolarsTestProvider" component for testing, but there does not appear to be an equivalent component for the app bridge's Provider. 

 

The following works:

import {PolarisTestProvider} from "@shopify/polaris";
import {BrowserRouter} from "react-router-dom";
import React from "react";
import enTranslations from '@shopify/polaris/locales/en.json';
import {Provider as AppBridgeProvider} from "@shopify/app-bridge-react/components";


export default function(props){
const config = {apiKey: "testtesttest",
shopOrigin: "foo-demo.myshopify.com",
forceRedirect: true};
return(
<PolarisTestProvider i18n={enTranslations}>
<BrowserRouter>
<AppBridgeProvider config={config}>
{props.children}
</AppBridgeProvider>
</BrowserRouter>
</PolarisTestProvider>
)};

But any attempt to mock the "AppBridgeProvider" or move the config variables to the PolarisTestProvider component causes the specs to fail as components do not render.  What is Shopify's recommended way to test embedded apps like this?

RazvanBar
New Member
1 0 0

Hi any answer for how you can mock the app-bridge-react ?

0 Likes
_Dominik_
Shopify Partner
22 0 6

Did you try this? Without "/components" at the end. Works for my case.

import {Provider as AppBridgeProvider} from '@shopify/app-bridge-react';

@afleischer wrote:

The following works:

import {Provider as AppBridgeProvider} from "@shopify/app-bridge-react/components";

But any attempt to mock the "AppBridgeProvider" or move the config variables to the PolarisTestProvider component causes the specs to fail as components do not render.  What is Shopify's recommended way to test embedded apps like this?


 

0 Likes
Dan_Sundy
Excursionist
25 0 3

I'm having the same problem using a very similar setup and using react-testing-library.

 

I get the following error when trying to test views that use app-bridge-react components (e.g. Modal):

AppBridgeError: APP::APP_ERROR::MISSING_LOCAL_ORIGIN: local origin cannot be blank

 

I am importing directly from @Shopify/app-bridge-react. Should we be using this library somehow? https://www.npmjs.com/package/@shopify/app-bridge-host

0 Likes
hi5dev
New Member
1 0 0

I ran into the same problem today. It turns out that it's complaining about window.location.origin being blank. It's undefined since the DOM is being mocked during testing. The solution for me was to set it before rendering the component. For example:

window.location.origin = 'https://www.example.com'

 

 

0 Likes