diff --git a/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js b/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
index b3ac7c41f3f..438d53c71d9 100644
--- a/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
+++ b/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
@@ -70,6 +70,32 @@ describe( 'WoopayExpressCheckoutButton', () => {
 	const mockRequest = jest.fn().mockResolvedValue( true );
 	const mockAddToCart = jest.fn().mockResolvedValue( true );
 	const api = new WCPayAPI( {}, mockRequest );
+	const mockAppearance = {
+		rules: {
+			'.Block': {},
+			'.Input': {},
+			'.Input--invalid': {},
+			'.Label': {},
+			'.Tab': {},
+			'.Tab--selected': {},
+			'.Tab:hover': {},
+			'.TabIcon--selected': {
+				color: undefined,
+			},
+			'.TabIcon:hover': {
+				color: undefined,
+			},
+			'.Text': {},
+			'.Text--redirect': {},
+		},
+		theme: 'stripe',
+		variables: {
+			colorBackground: '#ffffff',
+			colorText: undefined,
+			fontFamily: undefined,
+			fontSizeBase: undefined,
+		},
+	};
 
 	beforeEach( () => {
 		expressCheckoutIframe.mockImplementation( () => jest.fn() );
@@ -145,6 +171,8 @@ describe( 'WoopayExpressCheckoutButton', () => {
 					return 'testkey';
 				case 'order_id':
 					return 1;
+				case 'appearance':
+					return mockAppearance;
 				default:
 					return 'foo';
 			}
@@ -170,6 +198,7 @@ describe( 'WoopayExpressCheckoutButton', () => {
 				order_id: 1,
 				key: 'testkey',
 				billing_email: 'test@test.com',
+				appearance: mockAppearance,
 			} );
 			expect( expressCheckoutIframe ).not.toHaveBeenCalled();
 		} );