@mysetup/test-helpers 1.0.0

package/README.md

@@ -0,0 +1,30 @@
+# @mysetup/test-helpers
+
+A collection of helpful testing functions based on [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
+
+## Usage
+
+### `setupRender`
+
+`setupRender` accepts a component and default props, and returns a `render` function that will merge additional props to the component.
+
+```tsx
+import { screen, setupRender } from "../../test-helpers";
+
+const render = setupRender(<Component />, { text: "default props" });
+
+describe("setupRender", () => {
+    test("default props", () => {
+        render();
+
+        expect(screen.getByText("default prop")).toBeInTheDocument();
+    });
+
+    test("default props", () => {
+        render({ moreText: "more props" });
+
+        expect(screen.getByText("default props")).toBeInTheDocument();
+        expect(screen.getByText("more props")).toBeInTheDocument();
+    });
+});
+```

package/dist/helpers/index.d.ts

@@ -0,0 +1,32 @@
+import { render, type RenderOptions, type RenderHookOptions } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { type ReactNode, type ComponentType } from "react";
+import { type ProviderProps, type AppState } from "@mysetup/types";
+type MockOptions = MockNavigation & MockBreakpoint;
+interface MockNavigation {
+    navigation?: {
+        pathname?: string;
+        params?: {
+            searchTerm?: string;
+        };
+    };
+}
+interface MockBreakpoint {
+    breakpoint?: number;
+}
+interface ContextProvierProps extends ProviderProps {
+    children: ReactNode;
+}
+export declare const setupRender: <Props extends Record<string, any>>(Component: ComponentType<Props>, defaultProps?: Partial<Props & {
+    "data-testid": string;
+}>, defaultOptions?: RenderOptions & MockOptions) => ((passedProps?: Partial<Props>, passedOptions?: RenderOptions & MockOptions) => ReturnType<typeof render>);
+export declare const setupRenderWithProvider: <Props extends Record<string, any>>(Component: ComponentType<Props>, Provider: ComponentType<ContextProvierProps>, defaultProps?: Partial<Props & {
+    "data-testid": string;
+}>, defaultAppState?: Partial<AppState>, defaultOptions?: RenderOptions & MockOptions) => ((passedProps?: Partial<Props>, passedAppState?: Partial<AppState>, passedOptions?: RenderOptions & MockOptions) => ReturnType<typeof render>);
+export declare const setupRenderHook: <Result, Props>(hook: (initialProps: Props) => Result, defaultProps?: Props, defaultOptions?: RenderHookOptions<Props> & MockOptions) => (passedProps?: Partial<Props>, passedOptions?: RenderHookOptions<Props> & MockOptions) => import("@testing-library/react").RenderHookResult<Result, Props>;
+export declare const setupRenderHookWithProvider: <Result, Props>(hook: (initialProps: Props) => Result, Provider: ComponentType<ContextProvierProps>, defaultProps?: Props, defaultAppState?: Partial<AppState>, defaultOptions?: RenderHookOptions<Props> & MockOptions) => (passedProps?: Partial<Props>, passedAppState?: Partial<AppState> | null, passedOptions?: RenderHookOptions<Props> & MockOptions) => import("@testing-library/react").RenderHookResult<Result, Props>;
+export declare const getById: (container: HTMLElement, id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement | null;
+export { userEvent };
+export * from "jest-axe";
+export * from "@testing-library/react";
+//# sourceMappingURL=index.d.ts.map

package/dist/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../helpers/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,MAAM,EAEN,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACzB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAc,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEnE,KAAK,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAEnD,UAAU,cAAc;IACpB,UAAU,CAAC,EAAE;QACT,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;SACvB,CAAC;KACL,CAAC;CACL;AAED,UAAU,cAAc;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAeD,UAAU,mBAAoB,SAAQ,aAAa;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,GAEpB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,aAEtB,aAAa,CAAC,KAAK,CAAC,iBACjB,OAAO,CAAC,KAAK,GAAG;IAAE,aAAa,EAAE,MAAM,CAAA;CAAE,CAAC,mBACxC,aAAa,GAAG,WAAW,KAC5C,CAAC,CACA,WAAW,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EAC5B,aAAa,CAAC,EAAE,aAAa,GAAG,WAAW,KAC1C,UAAU,CAAC,OAAO,MAAM,CAAC,CAiD7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAEhC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,aAEtB,aAAa,CAAC,KAAK,CAAC,YACrB,aAAa,CAAC,mBAAmB,CAAC,iBAC9B,OAAO,CAAC,KAAK,GAAG;IAAE,aAAa,EAAE,MAAM,CAAA;CAAE,CAAC,oBACvC,OAAO,CAAC,QAAQ,CAAC,mBAClB,aAAa,GAAG,WAAW,KAC5C,CAAC,CACA,WAAW,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,EAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,EAClC,aAAa,CAAC,EAAE,aAAa,GAAG,WAAW,KAC1C,UAAU,CAAC,OAAO,MAAM,CAAC,CAuD7B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,EAAE,KAAK,QACnC,CAAC,YAAY,EAAE,KAAK,KAAK,MAAM,iBACtB,KAAK,mBACH,iBAAiB,CAAC,KAAK,CAAC,GAAG,WAAW,oBAGrC,OAAO,CAAC,KAAK,CAAC,kBACb,iBAAiB,CAAC,KAAK,CAAC,GAAG,WAAW,qEAwB5D,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,MAAM,EAAE,KAAK,QAC/C,CAAC,YAAY,EAAE,KAAK,KAAK,MAAM,YAC3B,aAAa,CAAC,mBAAmB,CAAC,iBAC7B,KAAK,oBACF,OAAO,CAAC,QAAQ,CAAC,mBAClB,iBAAiB,CAAC,KAAK,CAAC,GAAG,WAAW,oBAGrC,OAAO,CAAC,KAAK,CAAC,mBACX,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,kBAC1B,iBAAiB,CAAC,KAAK,CAAC,GAAG,WAAW,qEA+B5D,CAAC;AAEF,eAAO,MAAM,OAAO,qKAAoC,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,cAAc,UAAU,CAAC;AACzB,cAAc,wBAAwB,CAAC"}

package/dist/helpers/index.js

@@ -0,0 +1,147 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.userEvent = exports.getById = exports.setupRenderHookWithProvider = exports.setupRenderHook = exports.setupRenderWithProvider = exports.setupRender = void 0;
+var react_1 = require("@testing-library/react");
+var globals_1 = require("@jest/globals");
+var user_event_1 = require("@testing-library/user-event");
+Object.defineProperty(exports, "userEvent", { enumerable: true, get: function () { return user_event_1.userEvent; } });
+var react_2 = __importDefault(require("react"));
+var navigation_1 = require("next/navigation");
+globals_1.jest.doMock("next/navigation", function () { return ({
+    usePathname: globals_1.jest.fn(),
+    useSearchParams: globals_1.jest.fn(),
+    useRouter: function () { return ({
+        push: globals_1.jest.fn(),
+        replace: globals_1.jest.fn(),
+        forward: globals_1.jest.fn(),
+        back: globals_1.jest.fn(),
+        prefetch: globals_1.jest.fn(),
+        refresh: globals_1.jest.fn(),
+    }); },
+}); });
+var setupRender = function (Component, defaultProps, defaultOptions) {
+    if (defaultProps === void 0) { defaultProps = {}; }
+    if (defaultOptions === void 0) { defaultOptions = {}; }
+    return function (passedProps, passedOptions) {
+        var _a;
+        if (passedProps === void 0) { passedProps = {}; }
+        if (passedOptions === void 0) { passedOptions = {}; }
+        var props = __assign(__assign({}, defaultProps), passedProps);
+        var _b = __assign(__assign({}, defaultOptions), passedOptions), _c = _b.navigation, navigation = _c === void 0 ? {} : _c, Wrapper = _b.wrapper, breakpoint = _b.breakpoint, options = __rest(_b, ["navigation", "wrapper", "breakpoint"]);
+        if (navigation.pathname) {
+            navigation_1.usePathname.mockReturnValue(navigation.pathname);
+        }
+        if ((_a = navigation.params) === null || _a === void 0 ? void 0 : _a.searchTerm) {
+            navigation_1.useSearchParams.mockReturnValue(new URLSearchParams("searchTerm=".concat(navigation.params.searchTerm)));
+        }
+        if (breakpoint) {
+            Object.defineProperty(window, "innerWidth", {
+                value: breakpoint,
+            });
+        }
+        return (0, react_1.render)(react_2.default.createElement(react_2.default.Fragment, null, Wrapper ? (react_2.default.createElement(Wrapper, null,
+            react_2.default.createElement(Component, __assign({}, props)))) : (react_2.default.createElement(Component, __assign({}, props)))), options);
+    };
+};
+exports.setupRender = setupRender;
+var setupRenderWithProvider = function (Component, Provider, defaultProps, defaultAppState, defaultOptions) {
+    if (defaultProps === void 0) { defaultProps = {}; }
+    if (defaultAppState === void 0) { defaultAppState = {}; }
+    if (defaultOptions === void 0) { defaultOptions = {}; }
+    return function (passedProps, passedAppState, passedOptions) {
+        var _a;
+        if (passedProps === void 0) { passedProps = {}; }
+        if (passedAppState === void 0) { passedAppState = {}; }
+        if (passedOptions === void 0) { passedOptions = {}; }
+        var props = __assign(__assign({}, defaultProps), passedProps);
+        var _b = __assign(__assign({}, defaultOptions), passedOptions), _c = _b.navigation, navigation = _c === void 0 ? {} : _c, Wrapper = _b.wrapper, breakpoint = _b.breakpoint, options = __rest(_b, ["navigation", "wrapper", "breakpoint"]);
+        var appState = __assign(__assign({}, defaultAppState), passedAppState);
+        if (navigation.pathname) {
+            navigation_1.usePathname.mockReturnValue(navigation.pathname);
+        }
+        if ((_a = navigation.params) === null || _a === void 0 ? void 0 : _a.searchTerm) {
+            navigation_1.useSearchParams.mockReturnValue(new URLSearchParams("searchTerm=".concat(navigation.params.searchTerm)));
+        }
+        if (breakpoint) {
+            Object.defineProperty(window, "innerWidth", {
+                value: breakpoint,
+            });
+        }
+        return (0, react_1.render)(react_2.default.createElement(Provider, { appState: appState, version: "test" }, Wrapper ? (react_2.default.createElement(Wrapper, null,
+            react_2.default.createElement(Component, __assign({}, props)))) : (react_2.default.createElement(Component, __assign({}, props)))), options);
+    };
+};
+exports.setupRenderWithProvider = setupRenderWithProvider;
+var setupRenderHook = function (hook, defaultProps, defaultOptions) {
+    return function (passedProps, passedOptions) {
+        if (passedOptions === void 0) { passedOptions = {}; }
+        var props = (passedProps !== null && passedProps !== void 0 ? passedProps : defaultProps);
+        var _a = __assign(__assign({}, defaultOptions), passedOptions), _b = _a.navigation, navigation = _b === void 0 ? {} : _b, Wrapper = _a.wrapper, options = __rest(_a, ["navigation", "wrapper"]);
+        if (navigation.pathname) {
+            navigation_1.usePathname.mockReturnValue(navigation.pathname);
+        }
+        return (0, react_1.renderHook)(function () { return hook(props); }, __assign(__assign({}, options), { wrapper: function (_a) {
+                var children = _a.children;
+                return (react_2.default.createElement(react_2.default.Fragment, null, Wrapper ? react_2.default.createElement(Wrapper, null, children) : children));
+            } }));
+    };
+};
+exports.setupRenderHook = setupRenderHook;
+var setupRenderHookWithProvider = function (hook, Provider, defaultProps, defaultAppState, defaultOptions) {
+    return function (passedProps, passedAppState, passedOptions) {
+        if (passedOptions === void 0) { passedOptions = {}; }
+        var props = (passedProps !== null && passedProps !== void 0 ? passedProps : defaultProps);
+        var _a = __assign(__assign({}, defaultOptions), passedOptions), _b = _a.navigation, navigation = _b === void 0 ? {} : _b, Wrapper = _a.wrapper, options = __rest(_a, ["navigation", "wrapper"]);
+        var appState = __assign(__assign({}, defaultAppState), passedAppState);
+        if (navigation.pathname) {
+            navigation_1.usePathname.mockReturnValue(navigation.pathname);
+        }
+        return (0, react_1.renderHook)(function () { return hook(props); }, __assign(__assign({}, options), { wrapper: function (_a) {
+                var children = _a.children;
+                return (react_2.default.createElement(Provider, { appState: appState, version: "test" }, Wrapper ? react_2.default.createElement(Wrapper, null, children) : children));
+            } }));
+    };
+};
+exports.setupRenderHookWithProvider = setupRenderHookWithProvider;
+exports.getById = react_1.queryByAttribute.bind(null, "id");
+__exportStar(require("jest-axe"), exports);
+__exportStar(require("@testing-library/react"), exports);

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./helpers";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./helpers"), exports);

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "@mysetup/test-helpers",
+    "version": "1.0.0",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "require": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "build": "rm -rf ./dist && tsc -p tsconfig.build.json",
+        "lint": "eslint .",
+        "test": "jest",
+        "test:update": "pnpm test -- -u",
+        "test:coverage": "jest --coverage",
+        "typecheck": "tsc --noEmit",
+        "format": "prettier --write \"**/*.{ts,tsx,md,js,mjs,json}\"",
+        "checks": "pnpm typecheck && pnpm lint && pnpm test",
+        "clean": "rm -rf node_modules .swc dist pnpm-lock.yaml && echo \"✅  Successfully removed \""
+    },
+    "dependencies": {
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^16.0.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@jest/globals": "^29.7.0",
+        "react": "^18.3.1",
+        "next": "^15.0.2",
+        "react-aria": "^3.35.1",
+        "react-dom": "^18.3.1"
+    },
+    "devDependencies": {
+        "@mysetup/eslint-config": "latest",
+        "@mysetup/jest-config": "latest",
+        "@mysetup/prettier-config": "latest",
+        "@mysetup/tsconfig": "latest",
+        "@mysetup/types": "latest",
+        "@types/jest": "^29.5.14",
+        "@types/jest-axe": "^3.5.9",
+        "@types/node": "^22.8.6",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "eslint": "8.57.0",
+        "jest": "^29.7.0",
+        "jest-axe": "^9.0.0",
+        "typescript": "^5.6.3"
+    },
+    "prettier": "@mysetup/prettier-config",
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "packageManager": "pnpm@9.9.0"
+}