@rebilly/framepay-react 14.45.6 → 14.46.0

package/CHANGELOG.md

@@ -1,5 +1,5 @@
-## 14.45.6 (2026-10-19)
+## 14.46.0 (2026-10-19)
 
 ### 🧱 Updated Dependencies
 
-- Updated framepay-npm to 5.242.6
+- Updated framepay-npm to 5.243.0

package/build/index.d.ts

@@ -1,5 +1,5 @@
 import { SUPPORTED_CARD_BRANDS } from './lib/constants';
 import { withFramePay, withFramePayApplePayComponent, withFramePaySamsungPayComponent, withFramePayBankComponent, withFramePayCardComponent, withFramePayGooglePayComponent, withFramePayIBANComponent, withFramePayPaypalComponent } from './lib/components/injector';
 import FramePayProvider from './lib/components/provider';
-import { FramePayApplePayProps, FramePaySamsungPayProps, FramePayBankProps, FramePayCardProps, FramePayComponentProps, FramePayGooglePayProps, FramePayIBANProps, FramePayPaypalProps } from '../types/injector';
-export { SUPPORTED_CARD_BRANDS, FramePayProvider, withFramePay, withFramePayCardComponent, withFramePayBankComponent, withFramePayIBANComponent, withFramePayApplePayComponent, withFramePaySamsungPayComponent, withFramePayGooglePayComponent, withFramePayPaypalComponent, FramePayComponentProps, FramePayCardProps, FramePayBankProps, FramePayIBANProps, FramePayApplePayProps, FramePaySamsungPayProps, FramePayGooglePayProps, FramePayPaypalProps, };
+export { SUPPORTED_CARD_BRANDS, FramePayProvider, withFramePay, withFramePayCardComponent, withFramePayBankComponent, withFramePayIBANComponent, withFramePayApplePayComponent, withFramePaySamsungPayComponent, withFramePayGooglePayComponent, withFramePayPaypalComponent, };
+export type { FramePayApplePayProps, FramePaySamsungPayProps, FramePayBankProps, FramePayCardProps, FramePayComponentProps, FramePayGooglePayProps, FramePayIBANProps, FramePayPaypalProps, } from '../types/injector';

package/build/index.js

@@ -17,4 +17,4 @@ Object.defineProperty(exports, "withFramePayIBANComponent", { enumerable: true,
 Object.defineProperty(exports, "withFramePayPaypalComponent", { enumerable: true, get: function () { return injector_1.withFramePayPaypalComponent; } });
 const provider_1 = __importDefault(require("./lib/components/provider"));
 exports.FramePayProvider = provider_1.default;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsK0NBQXdEO0FBMkJwRCxzR0EzQkssaUNBQXFCLE9BMkJMO0FBekJ6Qix3REFTbUM7QUFrQi9CLDZGQTFCQSx1QkFBWSxPQTBCQTtBQUlaLDhHQTdCQSx3Q0FBNkIsT0E2QkE7QUFDN0IsZ0hBN0JBLDBDQUErQixPQTZCQTtBQUgvQiwwR0F6QkEsb0NBQXlCLE9BeUJBO0FBRHpCLDBHQXZCQSxvQ0FBeUIsT0F1QkE7QUFLekIsK0dBM0JBLHlDQUE4QixPQTJCQTtBQUg5QiwwR0F2QkEsb0NBQXlCLE9BdUJBO0FBSXpCLDRHQTFCQSxzQ0FBMkIsT0EwQkE7QUF2Qi9CLHlFQUF5RDtBQWVyRCwyQkFmRyxrQkFBZ0IsQ0FlSCJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsK0NBQXdEO0FBZ0JwRCxzR0FoQkssaUNBQXFCLE9BZ0JMO0FBZHpCLHdEQVNtQztBQU8vQiw2RkFmQSx1QkFBWSxPQWVBO0FBSVosOEdBbEJBLHdDQUE2QixPQWtCQTtBQUM3QixnSEFsQkEsMENBQStCLE9Ba0JBO0FBSC9CLDBHQWRBLG9DQUF5QixPQWNBO0FBRHpCLDBHQVpBLG9DQUF5QixPQVlBO0FBS3pCLCtHQWhCQSx5Q0FBOEIsT0FnQkE7QUFIOUIsMEdBWkEsb0NBQXlCLE9BWUE7QUFJekIsNEdBZkEsc0NBQTJCLE9BZUE7QUFaL0IseUVBQXlEO0FBSXJELDJCQUpHLGtCQUFnQixDQUlIIn0=

package/build/lib/constants.js

@@ -49,15 +49,17 @@ exports.REACT_VERSION = React.version;
 /**
  * Supported FramePay card types
  */
+// Literals match SupportedCardBrands. Assertions keep the const enum type
+// without requiring the test compiler to inline the enum.
 exports.SUPPORTED_CARD_BRANDS = {
-    Amex: "American Express" /* SupportedCardBrands.Amex */,
-    AstroPayCard: "AstroPay Card" /* SupportedCardBrands.AstroPayCard */,
-    Cup: "ChinaUnionPay" /* SupportedCardBrands.Cup */,
-    DinersClub: "Diners Club" /* SupportedCardBrands.DinersClub */,
-    Discover: "Discover" /* SupportedCardBrands.Discover */,
-    JCB: "JCB" /* SupportedCardBrands.JCB */,
-    Maestro: "Maestro" /* SupportedCardBrands.Maestro */,
-    MasterCard: "MasterCard" /* SupportedCardBrands.MasterCard */,
-    Visa: "Visa" /* SupportedCardBrands.Visa */,
+    Amex: 'American Express',
+    AstroPayCard: 'AstroPay Card',
+    Cup: 'ChinaUnionPay',
+    DinersClub: 'Diners Club',
+    Discover: 'Discover',
+    JCB: 'JCB',
+    Maestro: 'Maestro',
+    MasterCard: 'MasterCard',
+    Visa: 'Visa',
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsNkNBQStCO0FBRS9COzs7OztHQUtHO0FBRUg7OztHQUdHO0FBQ1UsUUFBQSxhQUFhLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQztBQUUzQzs7R0FFRztBQUNVLFFBQUEscUJBQXFCLEdBQThCO0lBQzVELElBQUksbURBQTBCO0lBQzlCLFlBQVksd0RBQWtDO0lBQzlDLEdBQUcsK0NBQXlCO0lBQzVCLFVBQVUsb0RBQWdDO0lBQzFDLFFBQVEsK0NBQThCO0lBQ3RDLEdBQUcscUNBQXlCO0lBQzVCLE9BQU8sNkNBQTZCO0lBQ3BDLFVBQVUsbURBQWdDO0lBQzFDLElBQUksdUNBQTBCO0NBQ2pDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsNkNBQStCO0FBRS9COzs7OztHQUtHO0FBRUg7OztHQUdHO0FBQ1UsUUFBQSxhQUFhLEdBQUcsS0FBSyxDQUFDLE9BQU8sQ0FBQztBQUUzQzs7R0FFRztBQUNILDBFQUEwRTtBQUMxRSwwREFBMEQ7QUFDN0MsUUFBQSxxQkFBcUIsR0FBOEI7SUFDNUQsSUFBSSxFQUFFLGtCQUF5QztJQUMvQyxZQUFZLEVBQUUsZUFBc0M7SUFDcEQsR0FBRyxFQUFFLGVBQXNDO0lBQzNDLFVBQVUsRUFBRSxhQUFvQztJQUNoRCxRQUFRLEVBQUUsVUFBaUM7SUFDM0MsR0FBRyxFQUFFLEtBQTRCO0lBQ2pDLE9BQU8sRUFBRSxTQUFnQztJQUN6QyxVQUFVLEVBQUUsWUFBbUM7SUFDL0MsSUFBSSxFQUFFLE1BQTZCO0NBQ3RDLENBQUMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/framepay-react",
-  "version": "14.45.6",
+  "version": "14.46.0",
   "description": "A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features",
   "main": "build/index.js",
   "author": "Rebilly",
@@ -32,7 +32,8 @@
     "LICENSE",
     "env.js",
     "tsconfig.json",
-    "tsconfig.spec.json"
+    "tsconfig.spec.json",
+    "vitest.config.mts"
   ],
   "overrides": {
     "@testing-library/react": {
@@ -52,11 +53,9 @@
   "devDependencies": {
     "@playwright/test": "^1.63.0",
     "@rebilly/playwright-config": "*",
-    "@fluffy-spoon/substitute": "^1.89.0",
     "@rebilly/eslint-config": "*",
     "@small-tech/auto-encrypt-localhost": "^8.4.0",
     "@testing-library/react": "^15.0.7",
-    "@types/jest": "^29.5.1",
     "@types/node": "^24.13.3",
     "@types/react": "^19.2.7",
     "core-js": "^3.50.0",
@@ -66,8 +65,7 @@
     "express": "^5.1.0",
     "globals": "^17.0.0",
     "gud": "^1.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^21.1.1",
     "npm-run-all2": "^8.0.4",
     "parcel": "^2.0.0",
     "portfinder": "^1.0.35",
@@ -76,8 +74,8 @@
     "react-dom": "^19.2.8",
     "react-dom-19": "npm:react-dom@^19.2.8",
     "scheduler": "^0.26.0",
-    "ts-jest": "^29.4.12",
     "typescript": "^6.0.3",
+    "vitest": "^4.1.0",
     "warning": "^4.0.3"
   },
   "scripts": {
@@ -90,12 +88,14 @@
     "clean-react-alias": "cross-env REACT_VERSION=clean node ./tests/e2e/switch-react-version",
     "dotenv": "node ./env.js",
     "build": "cross-env NODE_ENV=production tsc -p tsconfig.json",
-    "type:check": "tsc --noEmit -p tsconfig.json",
+    "type:check": "tsc --noEmit -p tsconfig.json && pnpm type:check:unit",
+    "type:check:unit": "tsc --noEmit -p tsconfig.spec.json",
     "build:e2e": "cross-env NODE_ENV=production run-s dotenv build clean:e2e && parcel build ./tests/e2e/fixtures/* --no-optimize --no-cache --no-scope-hoist --dist-dir tests/e2e/build",
     "dev:e2e": "cross-env NODE_ENV=development && run-s dotenv && parcel ./tests/e2e/fixtures/* --no-cache --dist-dir tests/e2e/build",
     "serve:e2e": "run-s dotenv build:* && node tests/e2e/local-server.mjs",
     "serve:e2e:no-build": "node tests/e2e/local-server.mjs",
-    "test:unit": "jest --config ./tests/unit/jest.config.js",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
     "test:e2e:base": "pnpm test:e2e:run",
     "test:e2e:react-14": "cross-env REACT_VERSION=0.14.0 run-s set-react-14 dotenv build:e2e test:e2e:base",
     "test:e2e:react-15": "cross-env REACT_VERSION=15.0.0 run-s set-react-15 dotenv build:e2e test:e2e:base",

package/src/index.ts

@@ -13,17 +13,6 @@ import {
 
 import FramePayProvider from './lib/components/provider';
 
-import {
-    FramePayApplePayProps,
-    FramePaySamsungPayProps,
-    FramePayBankProps,
-    FramePayCardProps,
-    FramePayComponentProps,
-    FramePayGooglePayProps,
-    FramePayIBANProps,
-    FramePayPaypalProps,
-} from '../types/injector';
-
 export {
     SUPPORTED_CARD_BRANDS,
     FramePayProvider,
@@ -35,12 +24,15 @@ export {
     withFramePaySamsungPayComponent,
     withFramePayGooglePayComponent,
     withFramePayPaypalComponent,
-    FramePayComponentProps,
-    FramePayCardProps,
-    FramePayBankProps,
-    FramePayIBANProps,
+};
+
+export type {
     FramePayApplePayProps,
     FramePaySamsungPayProps,
+    FramePayBankProps,
+    FramePayCardProps,
+    FramePayComponentProps,
     FramePayGooglePayProps,
+    FramePayIBANProps,
     FramePayPaypalProps,
-};
+} from '../types/injector';

package/src/lib/components/elements/bank-element.spec.tsx

@@ -1,136 +1,122 @@
-import { Arg, Substitute } from '@fluffy-spoon/substitute';
 import { render } from '@testing-library/react';
 import * as React from 'react';
+import { vi } from 'vitest';
 import FramePayError from '../../framepay-error';
 import BankElement from './bank-element';
-import type { BankProps } from '../../../../types/elements';
-import type { Bban, BankElement as BankElementType } from '@rebilly/framepay';
+import { bankProps, fieldDouble } from '../../../../tests/unit/element-props';
 
 describe('BankElement', () => {
-    it('should not setup the element while api is not ready', () => {
-        const props = Substitute.for<BankProps>();
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
 
-        const setupElementSpy = jest.spyOn(
-            BankElement.prototype,
-            'setupElement',
-        );
+    it('should not setup the element while api is not ready', () => {
+        const setupElementSpy = vi.spyOn(BankElement.prototype, 'setupElement');
 
         render(
-            <BankElement
-                {...props}
-                Framepay={{
-                    ...props.Framepay,
-                    bban: props.Framepay.bban,
-                    ready: false,
-                }}
-                elementType="routingNumber"
-            />,
+            React.createElement(
+                BankElement,
+                bankProps('routingNumber', { ready: false }),
+            ),
         );
 
         expect(setupElementSpy).not.toHaveBeenCalled();
     });
 
     it('should setup the element when api is ready', () => {
-        const props = Substitute.for<BankProps>();
-
-        const setupElementSpy = jest.spyOn(
-            BankElement.prototype,
-            'setupElement',
-        );
+        const setupElementSpy = vi.spyOn(BankElement.prototype, 'setupElement');
+        const mount = vi.fn(() => fieldDouble());
 
         render(
-            <BankElement
-                {...props}
-                Framepay={{
-                    ...props.Framepay,
-                    bban: props.Framepay.bban,
+            React.createElement(
+                BankElement,
+                bankProps('accountType', {
                     ready: true,
-                }}
-                elementType="accountType"
-            />,
+                    bban: { mount },
+                }),
+            ),
         );
 
         expect(setupElementSpy).toHaveBeenCalled();
     });
 
-    it('should destroy the element on component unmount', (done) => {
-        const props = Substitute.for<BankProps>();
-        const element = Substitute.for<BankElementType>();
-
-        element.destroy().mimicks(() => {
-            done();
-        });
-
-        props.Framepay.bban.mount(Arg.any(), Arg.any()).returns(element);
+    it('should destroy the element on component unmount', () => {
+        const element = fieldDouble();
+        const mount = vi.fn(() => element);
 
         class TmpComponent extends React.Component {
             render() {
-                return (
-                    <BankElement
-                        {...props}
-                        Framepay={{
-                            ...props.Framepay,
-                            bban: props.Framepay.bban,
-                            ready: true,
-                        }}
-                        elementType="routingNumber"
-                    />
+                return React.createElement(
+                    BankElement,
+                    bankProps('routingNumber', {
+                        ready: true,
+                        bban: { mount },
+                    }),
                 );
             }
         }
 
         const { unmount } = render(<TmpComponent />);
         unmount();
+        expect(element.destroy).toHaveBeenCalled();
     });
 
     it('should render the empty div element', () => {
-        const props = Substitute.for<BankProps>();
-
-        props.Framepay.ready.returns(true);
+        const mount = vi.fn(() => fieldDouble());
 
         const { container } = render(
-            <BankElement {...props} Framepay={props.Framepay} />,
+            React.createElement(
+                BankElement,
+                bankProps('accountNumber', {
+                    ready: true,
+                    bban: { mount },
+                }),
+            ),
         );
         expect(container.firstChild).toMatchInlineSnapshot('<div />');
     });
 
     it('should fail the element mount on remote error', () => {
-        const props = Substitute.for<BankProps>();
-
         try {
             render(
-                <BankElement
-                    {...props}
-                    Framepay={{
-                        ...props.Framepay,
+                React.createElement(
+                    BankElement,
+                    bankProps('accountNumber', {
+                        ready: true,
                         bban: {
-                            ...props.Framepay.bban,
-                            mount: null,
+                            mount: () => {
+                                throw new Error('remote mount failed');
+                            },
                         },
-                        ready: true,
-                    }}
-                    elementType="accountNumber"
-                />,
+                    }),
+                ),
             );
             // never
             expect(true).toEqual(false);
         } catch (error) {
-            expect(error.code).toEqual(FramePayError.codes.elementMountError);
+            expect(error).toMatchObject({
+                code: FramePayError.codes.elementMountError,
+            });
         }
     });
 
     it('mounts its element type through Framepay.bban', () => {
-        const props = Substitute.for<BankProps>();
-        const bban = Substitute.for<Bban>();
+        const mount = vi.fn(() => fieldDouble());
 
         render(
-            <BankElement
-                {...props}
-                Framepay={{ ...props.Framepay, bban, ready: true }}
-                elementType="accountNumber"
-            />,
+            React.createElement(
+                BankElement,
+                bankProps('accountNumber', {
+                    ready: true,
+                    bban: { mount },
+                }),
+            ),
         );
 
-        bban.received(1).mount(Arg.any(), 'accountNumber');
+        expect(mount).toHaveBeenCalledTimes(1);
+        expect(mount).toHaveBeenCalledWith(
+            expect.any(HTMLElement),
+            'accountNumber',
+        );
     });
 });

package/src/lib/components/elements/card-element.spec.tsx

@@ -1,114 +1,102 @@
-import { Substitute } from '@fluffy-spoon/substitute';
 import { render } from '@testing-library/react';
 import * as React from 'react';
+import { vi } from 'vitest';
 import FramePayError from '../../framepay-error';
 import CardElement from './card-element';
-import type { CardElement as CardElementType } from '@rebilly/framepay';
+import { cardProps, fieldDouble } from '../../../../tests/unit/element-props';
 
 describe('CardElement', () => {
-    it('should not setup the element while api is not ready', () => {
-        const props = Substitute.for<CardProps>();
-
-        props.Framepay.ready.returns(false);
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
 
-        const setupElementSpy = jest.spyOn(
-            CardElement.prototype,
-            'setupElement',
-        );
+    it('should not setup the element while api is not ready', () => {
+        const setupElementSpy = vi.spyOn(CardElement.prototype, 'setupElement');
 
-        render(<CardElement {...props} Framepay={props.Framepay} />);
+        render(React.createElement(CardElement, cardProps({ ready: false })));
 
         expect(setupElementSpy).not.toHaveBeenCalled();
     });
 
     it('should setup the element when api is ready', () => {
-        const props = Substitute.for<CardProps>();
-        const setupElementSpy = jest.spyOn(
-            CardElement.prototype,
-            'setupElement',
-        );
+        const setupElementSpy = vi.spyOn(CardElement.prototype, 'setupElement');
+        const mount = vi.fn(() => fieldDouble());
 
         const { rerender } = render(
-            <CardElement
-                Framepay={{
-                    ready: false,
-                }}
-            />,
+            React.createElement(CardElement, cardProps({ ready: false })),
         );
 
         expect(setupElementSpy).toHaveBeenCalledTimes(0);
 
         rerender(
-            <CardElement
-                Framepay={{
-                    card: props.Framepay.card,
+            React.createElement(
+                CardElement,
+                cardProps({
                     ready: true,
-                }}
-            />,
+                    card: { mount },
+                }),
+            ),
         );
 
         expect(setupElementSpy).toHaveBeenCalledTimes(1);
     });
 
     it('should render the empty div element', () => {
-        const props = Substitute.for<CardProps>();
+        const mount = vi.fn(() => fieldDouble());
         const { container } = render(
-            <CardElement {...props} Framepay={props.Framepay} />,
+            React.createElement(
+                CardElement,
+                cardProps({
+                    ready: true,
+                    card: { mount },
+                }),
+            ),
         );
         expect(container.firstChild).toMatchInlineSnapshot('<div />');
     });
 
-    it('should destroy the element on component unmount', (done) => {
-        const props = Substitute.for<CardProps>();
-        const element = Substitute.for<CardElementType>();
-
-        element.destroy().mimicks(() => {
-            done();
-        });
+    it('should destroy the element on component unmount', () => {
+        const element = fieldDouble();
+        const mount = vi.fn(() => element);
 
         class TmpComponent extends React.Component {
             render() {
-                return (
-                    <CardElement
-                        {...props}
-                        Framepay={{
-                            ...props.Framepay,
-                            card: {
-                                ...props.Framepay.card,
-                                mount: () => element,
-                            },
-                            ready: true,
-                        }}
-                    />
+                return React.createElement(
+                    CardElement,
+                    cardProps({
+                        ready: true,
+                        card: { mount },
+                    }),
                 );
             }
         }
 
         const { unmount } = render(<TmpComponent />);
         unmount();
+        expect(element.destroy).toHaveBeenCalled();
     });
 
     it('should fail the element mount on remote error', () => {
-        const props = Substitute.for<CardProps>();
-
         try {
             render(
-                <CardElement
-                    {...props}
-                    Framepay={{
-                        ...props.Framepay,
+                React.createElement(
+                    CardElement,
+                    cardProps({
+                        ready: true,
                         card: {
-                            ...props.Framepay.card,
-                            mount: null,
+                            mount: () => {
+                                throw new Error('remote mount failed');
+                            },
                         },
-                        ready: true,
-                    }}
-                />,
+                    }),
+                ),
             );
             // never
             expect(true).toEqual(false);
         } catch (error) {
-            expect(error.code).toEqual(FramePayError.codes.elementMountError);
+            expect(error).toMatchObject({
+                code: FramePayError.codes.elementMountError,
+            });
         }
     });
 });

package/src/lib/components/elements/iban-element.spec.tsx

@@ -1,105 +1,101 @@
-import { Substitute } from '@fluffy-spoon/substitute';
 import { render } from '@testing-library/react';
 import * as React from 'react';
+import { vi } from 'vitest';
 import FramePayError from '../../framepay-error';
 import IBANElement from './iban-element';
-import type { IbanElement as IbanElementType } from '@rebilly/framepay';
+import { fieldDouble, ibanProps } from '../../../../tests/unit/element-props';
 
 describe('IBANElement', () => {
-    it('should not setup the element while api is not ready', () => {
-        const props = Substitute.for<IBANProps>();
-
-        props.Framepay.ready.returns(false);
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
 
-        const spy = jest.spyOn(IBANElement.prototype, 'setupElement');
+    it('should not setup the element while api is not ready', () => {
+        const spy = vi.spyOn(IBANElement.prototype, 'setupElement');
 
-        render(<IBANElement {...props} Framepay={props.Framepay} />);
+        render(React.createElement(IBANElement, ibanProps({ ready: false })));
         expect(spy).not.toHaveBeenCalled();
     });
 
     it('should setup the element when api is ready', () => {
-        const props = Substitute.for<IBANProps>();
-        const spy = jest.spyOn(IBANElement.prototype, 'setupElement');
-
-        props.Framepay.ready.returns(false);
+        const spy = vi.spyOn(IBANElement.prototype, 'setupElement');
+        const mount = vi.fn(() => fieldDouble());
 
         const { rerender } = render(
-            <IBANElement {...props} Framepay={props.Framepay} />,
+            React.createElement(IBANElement, ibanProps({ ready: false })),
         );
 
         expect(spy).toHaveBeenCalledTimes(0);
 
-        const nextProps = Substitute.for<IBANProps>();
-
         rerender(
-            <IBANElement
-                {...nextProps}
-                Framepay={{ iban: nextProps.Framepay.iban, ready: true }}
-            />,
+            React.createElement(
+                IBANElement,
+                ibanProps({
+                    ready: true,
+                    iban: { mount },
+                }),
+            ),
         );
 
         expect(spy).toHaveBeenCalledTimes(1);
     });
 
     it('should render the empty div element', () => {
-        const props = Substitute.for<IBANProps>();
+        const mount = vi.fn(() => fieldDouble());
         const { container } = render(
-            <IBANElement {...props} Framepay={props.Framepay} />,
+            React.createElement(
+                IBANElement,
+                ibanProps({
+                    ready: true,
+                    iban: { mount },
+                }),
+            ),
         );
         expect(container.firstChild).toMatchInlineSnapshot('<div />');
     });
 
-    it('should destroy the element on component unmount', (done) => {
-        const props = Substitute.for<IBANProps>();
-        const element = Substitute.for<IbanElementType>();
-
-        element.destroy().mimicks(() => {
-            done();
-        });
+    it('should destroy the element on component unmount', () => {
+        const element = fieldDouble();
+        const mount = vi.fn(() => element);
 
         class TmpComponent extends React.Component {
             render() {
-                return (
-                    <IBANElement
-                        {...props}
-                        Framepay={{
-                            ...props.Framepay,
-                            iban: {
-                                ...props.Framepay.iban,
-                                mount: () => element,
-                            },
-                            ready: true,
-                        }}
-                    />
+                return React.createElement(
+                    IBANElement,
+                    ibanProps({
+                        ready: true,
+                        iban: { mount },
+                    }),
                 );
             }
         }
 
         const { unmount } = render(<TmpComponent />);
         unmount();
+        expect(element.destroy).toHaveBeenCalled();
     });
 
     it('should fail the element mount on remote error', () => {
-        const props = Substitute.for<IBANProps>();
-
         try {
             render(
-                <IBANElement
-                    {...props}
-                    Framepay={{
-                        ...props.Framepay,
+                React.createElement(
+                    IBANElement,
+                    ibanProps({
+                        ready: true,
                         iban: {
-                            ...props.Framepay.iban,
-                            mount: null,
+                            mount: () => {
+                                throw new Error('remote mount failed');
+                            },
                         },
-                        ready: true,
-                    }}
-                />,
+                    }),
+                ),
             );
             // never
             expect(true).toEqual(false);
         } catch (error) {
-            expect(error.code).toEqual(FramePayError.codes.elementMountError);
+            expect(error).toMatchObject({
+                code: FramePayError.codes.elementMountError,
+            });
         }
     });
 });

package/src/lib/components/injector.spec.tsx

@@ -1,4 +1,3 @@
-import { Substitute } from '@fluffy-spoon/substitute';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 
@@ -7,6 +6,7 @@ import { withFramePay } from '../..';
 import type { FramePayComponentProps } from '../../../types/injector';
 
 import { ContextProvider } from '../context';
+import { framepayContext } from '../../../tests/unit/element-props';
 
 describe('Injector', () => {
     it('withFramePay HOC the context data should be provided', () => {
@@ -29,20 +29,15 @@ describe('Injector', () => {
             }
         }
 
-        const context = Substitute.for<FramePayContext>();
         const TMPWrapper = withFramePay(TMPComponent);
 
         class App extends React.Component {
             render() {
                 return (
                     <ContextProvider
-                        value={{
-                            ...context,
-                            error: 'withFramePay',
-                            ready: true,
-                        }}
+                        value={framepayContext('withFramePay', true)}
                     >
-                        <TMPWrapper />
+                        <TMPWrapper someProperty="value" />
                     </ContextProvider>
                 );
             }
@@ -79,20 +74,18 @@ describe('Injector', () => {
             }
         }
 
-        const context = Substitute.for<FramePayContext>();
         const TMPWrapper = withFramePay(TMPComponent);
 
         class App extends React.Component {
             render() {
                 return (
                     <ContextProvider
-                        value={{
-                            ...context,
-                            error: 'withFramePayCardComponent',
-                            ready: true,
-                        }}
+                        value={framepayContext(
+                            'withFramePayCardComponent',
+                            true,
+                        )}
                     >
-                        <TMPWrapper />
+                        <TMPWrapper someProperty="value" />
                     </ContextProvider>
                 );
             }
@@ -129,20 +122,18 @@ describe('Injector', () => {
             }
         }
 
-        const context = Substitute.for<FramePayContext>();
         const TMPWrapper = withFramePay(TMPComponent);
 
         class App extends React.Component {
             render() {
                 return (
                     <ContextProvider
-                        value={{
-                            ...context,
-                            error: 'withFramePayBankComponent',
-                            ready: true,
-                        }}
+                        value={framepayContext(
+                            'withFramePayBankComponent',
+                            true,
+                        )}
                     >
-                        <TMPWrapper />
+                        <TMPWrapper someProperty="value" />
                     </ContextProvider>
                 );
             }

package/src/lib/components/provider.spec.tsx

@@ -1,5 +1,6 @@
 import { act, render } from '@testing-library/react';
 import * as React from 'react';
+import { vi, type Mock } from 'vitest';
 import Provider from './provider';
 
 describe('Provider', () => {
@@ -57,10 +58,10 @@ describe('Provider', () => {
 describe('Provider on a page where framepay.js is loaded', () => {
     interface Api {
         initialized: boolean;
-        initialize: jest.Mock;
-        update: jest.Mock;
-        on: jest.Mock;
-        off: jest.Mock;
+        initialize: Mock;
+        update: Mock;
+        on: Mock;
+        off: Mock;
     }
 
     const page = window as unknown as { Framepay?: Api };
@@ -74,10 +75,10 @@ describe('Provider on a page where framepay.js is loaded', () => {
     beforeEach(() => {
         api = {
             initialized: false,
-            initialize: jest.fn(() => Promise.resolve()),
-            update: jest.fn(() => Promise.resolve()),
-            on: jest.fn(),
-            off: jest.fn(),
+            initialize: vi.fn(() => Promise.resolve()),
+            update: vi.fn(() => Promise.resolve()),
+            on: vi.fn(),
+            off: vi.fn(),
         };
         page.Framepay = api;
     });
@@ -104,7 +105,7 @@ describe('Provider on a page where framepay.js is loaded', () => {
                 handler();
             }
         });
-        const onReady = jest.fn();
+        const onReady = vi.fn();
         const transactionData = { amount: 5, currency: 'USD', label: 'Plan' };
 
         render(
@@ -132,8 +133,8 @@ describe('Provider on a page where framepay.js is loaded', () => {
         });
         const rejection = { code: 'invalid-methods-configuration' };
         api.update.mockImplementation(() => Promise.reject(rejection));
-        const onReady = jest.fn();
-        const onError = jest.fn();
+        const onReady = vi.fn();
+        const onError = vi.fn();
 
         render(
             <Provider
@@ -170,15 +171,24 @@ describe('Provider on a page where framepay.js is loaded', () => {
                 handler();
             }
         });
-        let settle: { resolve: () => void; reject: (error: object) => void };
-        api.update.mockImplementation(
-            () =>
-                new Promise<void>((resolve, reject) => {
-                    settle = { resolve, reject };
-                }),
-        );
-        const onReady = jest.fn();
-        const onError = jest.fn();
+        const pendingUpdate = () => {
+            let captured:
+                | { resolve: () => void; reject: (error: object) => void }
+                | undefined;
+            const promise = new Promise<void>((resolve, reject) => {
+                captured = { resolve, reject };
+            });
+            if (captured === undefined) {
+                throw new Error(
+                    'FramePay update did not capture its settlement',
+                );
+            }
+            return { promise, settle: captured };
+        };
+        let pending = pendingUpdate();
+        api.update.mockImplementation(() => pending.promise);
+        const onReady = vi.fn();
+        const onError = vi.fn();
 
         const { unmount } = render(
             <Provider
@@ -189,17 +199,13 @@ describe('Provider on a page where framepay.js is loaded', () => {
         );
         await flush();
         unmount();
-        settle.resolve();
+        pending.settle.resolve();
         await flush();
 
         expect(onReady).not.toHaveBeenCalled();
 
-        api.update.mockImplementation(
-            () =>
-                new Promise<void>((resolve, reject) => {
-                    settle = { resolve, reject };
-                }),
-        );
+        pending = pendingUpdate();
+        api.update.mockImplementation(() => pending.promise);
         const second = render(
             <Provider
                 publishableKey={publishableKey}
@@ -209,7 +215,7 @@ describe('Provider on a page where framepay.js is loaded', () => {
         );
         await flush();
         second.unmount();
-        settle.reject({ code: 'invalid-methods-configuration' });
+        pending.settle.reject({ code: 'invalid-methods-configuration' });
         await flush();
 
         expect(onError).not.toHaveBeenCalled();
@@ -231,8 +237,8 @@ describe('Provider on a page where framepay.js is loaded', () => {
                 }
             },
         );
-        const onError = jest.fn();
-        const onReady = jest.fn();
+        const onError = vi.fn();
+        const onReady = vi.fn();
 
         render(
             <Provider

package/src/lib/constants.ts

@@ -16,14 +16,16 @@ export const REACT_VERSION = React.version;
 /**
  * Supported FramePay card types
  */
+// Literals match SupportedCardBrands. Assertions keep the const enum type
+// without requiring the test compiler to inline the enum.
 export const SUPPORTED_CARD_BRANDS: SupportedCardBrandsObject = {
-    Amex: SupportedCardBrands.Amex,
-    AstroPayCard: SupportedCardBrands.AstroPayCard,
-    Cup: SupportedCardBrands.Cup,
-    DinersClub: SupportedCardBrands.DinersClub,
-    Discover: SupportedCardBrands.Discover,
-    JCB: SupportedCardBrands.JCB,
-    Maestro: SupportedCardBrands.Maestro,
-    MasterCard: SupportedCardBrands.MasterCard,
-    Visa: SupportedCardBrands.Visa,
+    Amex: 'American Express' as SupportedCardBrands,
+    AstroPayCard: 'AstroPay Card' as SupportedCardBrands,
+    Cup: 'ChinaUnionPay' as SupportedCardBrands,
+    DinersClub: 'Diners Club' as SupportedCardBrands,
+    Discover: 'Discover' as SupportedCardBrands,
+    JCB: 'JCB' as SupportedCardBrands,
+    Maestro: 'Maestro' as SupportedCardBrands,
+    MasterCard: 'MasterCard' as SupportedCardBrands,
+    Visa: 'Visa' as SupportedCardBrands,
 };

package/tests/unit/element-props.ts

@@ -0,0 +1,78 @@
+import { vi, type Mock } from 'vitest';
+import type { FramePay } from '@rebilly/framepay';
+import type { FramePayContext } from '../../types/context';
+import type {
+    BankProps,
+    CardProps,
+    FramepayProps,
+    IBANProps,
+} from '../../types/elements';
+
+export type FieldDouble = {
+    readonly on: Mock;
+    readonly destroy: Mock;
+};
+
+export function fieldDouble(): FieldDouble {
+    return {
+        on: vi.fn(),
+        destroy: vi.fn(),
+    };
+}
+
+type Mount = (node: HTMLElement, fieldType?: string) => FieldDouble;
+
+export type FramepayStub = {
+    readonly ready: boolean;
+    readonly bban?: {
+        readonly mount: Mount;
+    };
+    readonly card?: {
+        readonly mount: Mount;
+    };
+    readonly iban?: {
+        readonly mount: (node: HTMLElement) => FieldDouble;
+    };
+};
+
+/**
+ * FramepayProps extends the full FramePay API. These tests only touch
+ * `ready` and the mount method for one payment method.
+ */
+function framepayProps(stub: FramepayStub): FramepayProps {
+    return stub as unknown as FramepayProps;
+}
+
+export function bankProps(
+    elementType: BankProps['elementType'],
+    framepay: FramepayStub,
+): BankProps {
+    return {
+        Framepay: framepayProps(framepay),
+        elementType,
+    } as unknown as BankProps;
+}
+
+export function cardProps(framepay: FramepayStub): CardProps {
+    return {
+        Framepay: framepayProps(framepay),
+    } as unknown as CardProps;
+}
+
+export function ibanProps(framepay: FramepayStub): IBANProps {
+    return {
+        Framepay: framepayProps(framepay),
+        elementType: 'iban',
+    } as unknown as IBANProps;
+}
+
+export function framepayContext(
+    error: string,
+    ready: boolean,
+): FramePayContext {
+    return {
+        api: {} as unknown as FramePay,
+        error,
+        ready,
+    };
+}

package/tests/unit/vitest-globals.d.ts

@@ -0,0 +1 @@
+/// <reference types="vitest/globals" />

package/tsconfig.spec.json

@@ -1,13 +1,15 @@
 {
-    "extends": "./tsconfig",
+    "extends": "./tsconfig.json",
     "compilerOptions": {
-        "strictNullChecks": false
+        "noEmit": true,
+        "rootDir": "."
     },
     "include": [
         "src/**/*.ts",
         "src/**/*.tsx",
-        "tests/**/*.ts",
-        "tests/**/*.tsx",
+        "tests/unit/**/*.ts",
+        "tests/unit/**/*.tsx",
         "types/**/*.d.ts"
-    ]
+    ],
+    "exclude": ["node_modules/**"]
 }

package/vitest.config.mts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        exclude: [
+            '**/node_modules/**',
+            '**/dist/**',
+            '**/build/**',
+            '**/e2e/**',
+        ],
+    },
+});

package/tests/unit/jest.config.js

@@ -1,18 +0,0 @@
-module.exports = {
-    rootDir: '../..',
-    testEnvironment: 'jsdom',
-    testPathIgnorePatterns: ['.*/e2e/.*'],
-    transform: {
-        '.(ts|tsx)': [
-            'ts-jest',
-            {
-                tsconfig: 'tsconfig.spec.json',
-                diagnostics: {
-                    warnOnly: true,
-                },
-            },
-        ],
-    },
-    moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
-    moduleDirectories: ['node_modules', 'src', 'types'],
-};

package/tests/unit/specs/declaration-mock.spec.tsx

@@ -1,144 +0,0 @@
-import { Arg, Substitute } from '@fluffy-spoon/substitute';
-import { render } from '@testing-library/react';
-import * as React from 'react';
-
-/**
- * @see https://www.npmjs.com/package/@fluffy-spoon/substitute
- */
-describe('Mock functionality works correctly', () => {
-    it('String property of interface', () => {
-        interface Example {
-            readonly bar: string;
-        }
-
-        const baz = 'baz';
-        const foo = Substitute.for<Example>();
-
-        foo.bar.returns(baz);
-        const call1 = foo.bar;
-        const call2 = foo.bar;
-        expect(call1).toEqual(baz);
-        expect(call2).toEqual(baz);
-    });
-
-    it('Can mock parent interface', () => {
-        interface NestedApi {
-            readonly nestedMethod: () => boolean;
-        }
-
-        interface SuperParent {
-            readonly property1: string;
-            readonly method1: () => number;
-            readonly api: NestedApi;
-        }
-
-        interface Parent extends SuperParent {
-            readonly property2: string;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            readonly method2: (arg: any) => string;
-        }
-
-        interface Child extends Parent {
-            readonly bar: string;
-        }
-
-        const params = Substitute.for<Child>();
-
-        params.property1.returns('property1-value');
-        params.property2.returns('property2-value');
-        params.method1().returns(10);
-        params.method2(Arg.any()).returns('method2-value');
-
-        params.api.nestedMethod().returns(false);
-
-        expect(params.property1).toEqual('property1-value');
-        expect(params.property2).toEqual('property2-value');
-        expect(params.method1()).toEqual(10);
-        expect(params.method2(10)).toEqual('method2-value');
-
-        expect(params.api.nestedMethod()).toEqual(false);
-    });
-
-    it('Extended calls on the same level works correctly', () => {
-        interface Element {
-            readonly destroy: () => void;
-        }
-
-        interface ParentMethod {
-            readonly mount: () => Element;
-        }
-
-        interface ChildMethod1 extends ParentMethod {
-            readonly name: string;
-        }
-
-        interface ChildMethod2 extends ParentMethod {
-            readonly name: string;
-        }
-
-        interface Api {
-            readonly child1: ChildMethod1;
-            readonly child2: ChildMethod2;
-        }
-
-        const api = Substitute.for<Api>();
-        const spy1 = jest.fn();
-        const spy2 = jest.fn();
-
-        api.child1.mount().returns(Substitute.for<Element>());
-
-        api.child2.mount().returns(Substitute.for<Element>());
-
-        api.child1
-            .mount()
-            .destroy()
-
-            .mimicks(spy1);
-
-        api.child2
-            .mount()
-            .destroy()
-
-            .mimicks(spy2);
-
-        const el = api.child1.mount();
-        el.destroy();
-
-        expect(spy1).toBeCalledTimes(1);
-        expect(spy2).not.toHaveBeenCalled();
-
-        interface ComponentProps {
-            readonly api: Api;
-        }
-
-        interface ComponentState {
-            readonly element: Element;
-        }
-
-        class TmpParentComponent extends React.Component<
-            ComponentProps,
-            ComponentState
-        > {
-            componentDidMount() {
-                this.setState({ element: this.props.api.child1.mount() });
-            }
-
-            componentWillUnmount() {
-                this.state.element.destroy();
-            }
-
-            render() {
-                return <div />;
-            }
-        }
-
-        const { unmount } = render(<TmpParentComponent api={api} />);
-        expect(spy1).toBeCalledTimes(1);
-        expect(spy2).not.toHaveBeenCalled();
-
-        unmount();
-
-        expect(spy1).toBeCalledTimes(2);
-        expect(spy2).not.toHaveBeenCalled();
-    });
-});