From 171535640f107a0e40976f17c66e483526d43ef2 Mon Sep 17 00:00:00 2001 From: Arkadiusz Kubaczkowski Date: Mon, 6 Sep 2021 11:56:43 +0200 Subject: [PATCH 1/4] chore: jest mock file --- jest/stripe-react-native-mock.js | 128 ++++++++++++++++++++++++++++ src/hooks/useConfirmSetupIntent.tsx | 10 +-- 2 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 jest/stripe-react-native-mock.js diff --git a/jest/stripe-react-native-mock.js b/jest/stripe-react-native-mock.js new file mode 100644 index 000000000..acf202f99 --- /dev/null +++ b/jest/stripe-react-native-mock.js @@ -0,0 +1,128 @@ +/* eslint-disable no-undef */ + +const mockFunctions = { + createPaymentMethod: jest.fn(async () => ({ + paymentMethod: {}, + error: null, + })), + createToken: jest.fn(async () => ({ + token: {}, + error: null, + })), + retrievePaymentIntent: jest.fn(async () => ({ + paymentIntent: {}, + error: null, + })), + retrieveSetupIntent: jest.fn(async () => ({ + setupIntent: {}, + error: null, + })), + confirmPayment: jest.fn(async () => ({ + paymentMethod: {}, + error: null, + })), + isApplePaySupported: jest.fn(async () => true), + presentApplePay: jest.fn(async () => ({ + error: null, + })), + updateApplePaySummaryItems: jest.fn(async () => ({})), + confirmApplePayPayment: jest.fn(async () => ({})), + handleCardAction: jest.fn(async () => ({ + paymentIntent: {}, + error: null, + })), + confirmSetupIntent: jest.fn(async () => ({ + setupIntent: {}, + error: null, + })), + createTokenForCVCUpdate: jest.fn(async () => ({ + tokenId: '123', + error: null, + })), + handleURLCallback: jest.fn(async () => true), + presentPaymentSheet: jest.fn(async () => ({ + paymentOption: {}, + error: null, + })), + confirmPaymentSheetPayment: jest.fn(async () => ({ + error: null, + })), + initGooglePay: jest.fn(async () => ({ + error: null, + })), + presentGooglePay: jest.fn(async () => ({ + error: null, + })), + createGooglePayPayment: jest.fn(async () => ({ + paymentMethod: {}, + error: null, + })), + openApplePaySetup: jest.fn(async () => ({ + error: null, + })), + initPaymentSheet: jest.fn(async () => ({ + paymentOption: {}, + error: null, + })), +}; + +const mockHooks = { + useConfirmPayment: jest.fn(() => ({ + confirmPayment: jest.fn(() => ({ + ...mockFunctions.confirmPayment(), + })), + })), + useConfirmSetupIntent: jest.fn(() => ({ + confirmSetupIntent: jest.fn(() => ({ + ...mockFunctions.confirmSetupIntent(), + })), + })), + useGooglePay: jest.fn(() => ({ + loading: false, + initGooglePay: jest.fn(async () => ({ + ...mockFunctions.initGooglePay(), + })), + presentGooglePay: jest.fn(async () => ({ + ...mockFunctions.presentGooglePay(), + })), + createGooglePayPaymentMethod: jest.fn(async () => ({ + ...mockFunctions.createGooglePayPayment(), + })), + })), + useApplePay: jest.fn(() => ({ + loading: false, + isApplePaySupported: true, + presentApplePay: jest.fn(async () => ({ + ...mockFunctions.presentApplePay(), + })), + confirmApplePayPayment: jest.fn(async () => ({ + ...mockFunctions.confirmApplePayPayment(), + })), + openApplePaySetup: jest.fn(async () => ({ + ...mockFunctions.openApplePaySetup(), + })), + })), + usePaymentSheet: jest.fn(() => ({ + loading: false, + initPaymentSheet: jest.fn(async () => ({ + ...mockFunctions.initPaymentSheet(), + })), + presentPaymentSheet: jest.fn(async () => ({ + ...mockFunctions.presentPaymentSheet(), + })), + confirmPaymentSheetPayment: jest.fn(async () => ({ + ...mockFunctions.confirmPaymentSheetPayment(), + })), + })), +}; + +module.exports = { + ...mockFunctions, + ...mockHooks, + StripeProvider: jest.fn(({ children }) => children), + CardField: jest.fn(() => null), + ApplePayButton: jest.fn(() => null), + AuBECSDebitForm: jest.fn(() => null), + GooglePayButton: jest.fn(() => null), + useStripe: jest.fn(() => mockHooks), +}; diff --git a/src/hooks/useConfirmSetupIntent.tsx b/src/hooks/useConfirmSetupIntent.tsx index 9aa88c07b..7ff86827f 100644 --- a/src/hooks/useConfirmSetupIntent.tsx +++ b/src/hooks/useConfirmSetupIntent.tsx @@ -7,9 +7,9 @@ import { useStripe } from './useStripe'; */ export function useConfirmSetupIntent() { const [loading, setLoading] = useState(false); - const { confirmSetupIntent: confirmSetupIntentNative } = useStripe(); + const { confirmSetupIntent: confirmSetupIntent } = useStripe(); - const confirmSetupIntent = useCallback( + const _confirmSetupIntent = useCallback( async ( paymentIntentClientSecret: string, data: ConfirmSetupIntent.Params, @@ -17,7 +17,7 @@ export function useConfirmSetupIntent() { ) => { setLoading(true); - const result = await confirmSetupIntentNative( + const result = await confirmSetupIntent( paymentIntentClientSecret, data, options @@ -27,11 +27,11 @@ export function useConfirmSetupIntent() { return result; }, - [confirmSetupIntentNative] + [confirmSetupIntent] ); return { - confirmSetupIntent, + confirmSetupIntent: _confirmSetupIntent, loading, }; } From 46fe381fa9c39a6ad16ff38df1bbb17df9ffd777 Mon Sep 17 00:00:00 2001 From: Arkadiusz Kubaczkowski Date: Mon, 6 Sep 2021 12:02:50 +0200 Subject: [PATCH 2/4] chore: add jest folder to the whitelist --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 5aad3f756..2705baa9e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "ios", "cpp", "app.plugin.js", - "stripe-react-native.podspec" + "stripe-react-native.podspec", + "jest" ], "scripts": { "test": "jest", From 53440db22ebb8772426dae88d8aeae77f102b618 Mon Sep 17 00:00:00 2001 From: Arkadiusz Kubaczkowski Date: Mon, 6 Sep 2021 16:08:48 +0200 Subject: [PATCH 3/4] chore: update docs --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index faf7a61bf..67c7a3340 100644 --- a/README.md +++ b/README.md @@ -224,6 +224,28 @@ Certain payment methods require a [webhook listener](https://stripe.com/docs/pay - Run `stripe listen --forward-to localhost:4242/webhook` - The CLI will print a webhook secret (such as, `whsec_***`) to the console. Set STRIPE_WEBHOOK_SECRET to this value in your `example/.env` file. +## Testing + +This library includes a built in mock file for Jest. +In order to use it, add the following code to the Jest setup file: + +```tsx +import mock from '@stripe/stripe-react-native/jest/stripe-react-native-mock.js'; + +jest.mock('@stripe/stripe-react-native', () => mock); +``` + +To have a more control over the mocks, you can extend and override particular methods e.g.: + +```tsx +const presentApplePayMock = jest.fn(); + +jest.mock('@stripe/stripe-react-native', () => ({ + ...mock, + presentApplePay: presentApplePayMock, +})); +``` + ## Troubleshooting ### `Undefined symbols for architecture x86_64` on iOS From 18f693ed220cf902cd3d0ee90568e442d9b89ae5 Mon Sep 17 00:00:00 2001 From: Arkadiusz Kubaczkowski Date: Thu, 16 Sep 2021 14:47:40 +0200 Subject: [PATCH 4/4] chore: better components mocks, rename mock file --- README.md | 2 +- jest/{stripe-react-native-mock.js => mock.js} | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) rename jest/{stripe-react-native-mock.js => mock.js} (93%) diff --git a/README.md b/README.md index 67c7a3340..e788efaea 100644 --- a/README.md +++ b/README.md @@ -230,7 +230,7 @@ This library includes a built in mock file for Jest. In order to use it, add the following code to the Jest setup file: ```tsx -import mock from '@stripe/stripe-react-native/jest/stripe-react-native-mock.js'; +import mock from '@stripe/stripe-react-native/jest/mock.js'; jest.mock('@stripe/stripe-react-native', () => mock); ``` diff --git a/jest/stripe-react-native-mock.js b/jest/mock.js similarity index 93% rename from jest/stripe-react-native-mock.js rename to jest/mock.js index acf202f99..c8d932da9 100644 --- a/jest/stripe-react-native-mock.js +++ b/jest/mock.js @@ -119,10 +119,10 @@ const mockHooks = { module.exports = { ...mockFunctions, ...mockHooks, - StripeProvider: jest.fn(({ children }) => children), - CardField: jest.fn(() => null), - ApplePayButton: jest.fn(() => null), - AuBECSDebitForm: jest.fn(() => null), - GooglePayButton: jest.fn(() => null), + StripeProvider: () => 'StripeProvider', + CardField: () => 'CardField', + ApplePayButton: () => 'ApplePayButton', + AuBECSDebitForm: () => 'AuBECSDebitForm', + GooglePayButton: () => 'GooglePayButton', useStripe: jest.fn(() => mockHooks), };