test(components): add tests for Button, Badge, Divider, Link, Typography

packages/components/jest.config.cjs

@@ -32,26 +32,22 @@ const testPathIgnorePatterns = [
     // Migrated components with no test file yet (issue #214). Remove each
     // entry as soon as its ComponentName.test.tsx lands — this list is a
     // checklist, not a migration-status list like the one above.
-    "<rootDir>/src/components/Badge/",
-    "<rootDir>/src/components/Button/",
-    "<rootDir>/src/components/Dialog/",
-    "<rootDir>/src/components/Divider/",
+    //
+    // Dialog, ErrorBoundary, Icon, Label, Portal, Scrim, and _internal are
+    // intentionally not on this checklist — they're internal/utility pieces
+    // covered indirectly through the components that consume them, not with
+    // dedicated test files of their own.
+    //
+    // Paper and PressableHighlight are also intentionally not on this
+    // checklist — both are slated for removal/replacement (Paper -> Card,
+    // PressableHighlight -> Pressable) once the library migration completes,
+    // so we're not adding new tests for code we're about to delete.
     "<rootDir>/src/components/EDSProvider/",
-    "<rootDir>/src/components/ErrorBoundary/",
-    "<rootDir>/src/components/Icon/",
     "<rootDir>/src/components/Input/",
-    "<rootDir>/src/components/Label/",
-    "<rootDir>/src/components/Link/",
-    "<rootDir>/src/components/Paper/",
-    "<rootDir>/src/components/Portal/",
-    "<rootDir>/src/components/PressableHighlight/",
-    "<rootDir>/src/components/Scrim/",
     "<rootDir>/src/components/Search/",
     "<rootDir>/src/components/SelectionControls/",
     "<rootDir>/src/components/TextArea/",
     "<rootDir>/src/components/TextField/",
-    "<rootDir>/src/components/Typography/",
-    "<rootDir>/src/components/_internal/",
 ];
 
 // Guard against the exact footgun these lists create: a follow-up PR adds
@@ -96,6 +92,7 @@ module.exports = {
     // changes its internal lib/ layout.
     moduleNameMapper: {
         "^react-native-worklets$": "react-native-worklets/lib/module/mock",
+        "^test-utils$": "<rootDir>/test-utils",
     },
     transformIgnorePatterns: (() => {
         const basePattern = jestExpoPreset.transformIgnorePatterns[0];

packages/components/jest.setup.ts

@@ -1,3 +1,34 @@
 import { setUpTests } from "react-native-reanimated";
 
 setUpTests();
+
+// @expo/vector-icons' icon sets resolve their font-loaded state asynchronously,
+// which triggers a setState after render() has already resolved, outside of
+// act(). Mock each icon set's component to a plain Text host node so icons
+// render synchronously. Static properties (e.g. `.font`, used by useEDS.ts's
+// `...MaterialCommunityIcons.font` spread) are copied over from the real
+// module rather than dropped, so code relying on them still works under test.
+jest.mock("@expo/vector-icons", () => {
+    // Referencing top-level imports from inside a jest.mock() factory throws
+    // ("out-of-scope variable"), since the factory must be self-contained —
+    // hence the inline requires here instead of module-level imports.
+    /* eslint-disable @typescript-eslint/no-require-imports */
+    const React = require("react") as typeof import("react");
+    const { Text } = require("react-native") as typeof import("react-native");
+    const actual: Record<string, unknown> =
+        jest.requireActual("@expo/vector-icons");
+    /* eslint-enable @typescript-eslint/no-require-imports */
+
+    const mocked: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(actual)) {
+        mocked[key] =
+            typeof value === "function"
+                ? Object.assign(
+                      (props: Record<string, unknown>) =>
+                          React.createElement(Text, props),
+                      value
+                  )
+                : value;
+    }
+    return mocked;
+});

packages/components/package.json

@@ -16,6 +16,7 @@
         "@testing-library/react-native": "^13.3.3",
         "@types/jest": "^29.5.14",
         "@types/react": "~19.2.17",
+        "@types/react-test-renderer": "^19.1.0",
         "@typescript-eslint/eslint-plugin": "^8.39.0",
         "@typescript-eslint/parser": "^8.39.0",
         "eslint": "^9.25.0",

packages/components/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
+import type { ReactTestInstance } from "react-test-renderer";
+import { render, screen } from "test-utils";
+import { Badge } from "./index";
+
+const flattenBackgroundColor = (element: ReactTestInstance) =>
+    StyleSheet.flatten(element.props.style as StyleProp<ViewStyle>)
+        ?.backgroundColor;
+
+const flattenBorderColor = (element: ReactTestInstance) =>
+    StyleSheet.flatten(element.props.style as StyleProp<ViewStyle>)
+        ?.borderColor;
+
+describe("Badge", () => {
+    it("renders string children", () => {
+        render(<Badge>New</Badge>);
+        expect(screen.getByText("New")).toBeTruthy();
+    });
+
+    it("renders numeric children", () => {
+        render(<Badge>{3}</Badge>);
+        expect(screen.getByText("3")).toBeTruthy();
+    });
+
+    it("truncates to a single line", () => {
+        render(<Badge>99+</Badge>);
+        expect(screen.getByText("99+")).toHaveProp("numberOfLines", 1);
+    });
+
+    it("renders without error and applies a different background color for a different tone", () => {
+        render(<Badge tone="neutral" testID="neutral-badge">Label</Badge>);
+        const neutralBackground = flattenBackgroundColor(
+            screen.getByTestId("neutral-badge")
+        );
+
+        render(<Badge tone="danger" testID="danger-badge">Label</Badge>);
+        const dangerBackground = flattenBackgroundColor(
+            screen.getByTestId("danger-badge")
+        );
+
+        expect(dangerBackground).not.toEqual(neutralBackground);
+    });
+
+    it("renders the outlined variant without error, with a visible border unlike the default solid variant", () => {
+        render(<Badge testID="solid-badge">Label</Badge>);
+        expect(
+            flattenBorderColor(screen.getByTestId("solid-badge"))
+        ).toBe("transparent");
+
+        render(<Badge variant="outlined" testID="outlined-badge">Label</Badge>);
+        expect(
+            flattenBorderColor(screen.getByTestId("outlined-badge"))
+        ).not.toBe("transparent");
+    });
+
+    it("renders the medium emphasis without error, with a different background color than the default low emphasis", () => {
+        render(<Badge testID="low-emphasis-badge">Label</Badge>);
+        const lowEmphasisBackground = flattenBackgroundColor(
+            screen.getByTestId("low-emphasis-badge")
+        );
+
+        render(<Badge emphasis="medium" testID="medium-emphasis-badge">Label</Badge>);
+        const mediumEmphasisBackground = flattenBackgroundColor(
+            screen.getByTestId("medium-emphasis-badge")
+        );
+
+        expect(mediumEmphasisBackground).not.toEqual(lowEmphasisBackground);
+    });
+});

packages/components/src/components/Button/Button.test.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from "react-native";
+import type { ReactTestInstance } from "react-test-renderer";
+import { fireEvent, render, screen } from "test-utils";
+import { Button } from "./index";
+
+const flattenStyle = (element: ReactTestInstance) =>
+    StyleSheet.flatten(element.props.style as StyleProp<ViewStyle & TextStyle>);
+
+describe("Button", () => {
+    it("renders the label", () => {
+        render(<Button label="Save" />);
+        expect(screen.getByText("Save")).toBeTruthy();
+    });
+
+    it("calls onPress when pressed", () => {
+        const onPress = jest.fn();
+        render(<Button label="Save" onPress={onPress} />);
+        fireEvent.press(screen.getByRole("button"));
+        expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onPress when disabled", () => {
+        const onPress = jest.fn();
+        render(<Button label="Save" onPress={onPress} disabled />);
+        fireEvent.press(screen.getByRole("button"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it("exposes disabled state to assistive technology", () => {
+        render(<Button label="Save" disabled />);
+        expect(screen.getByRole("button")).toBeDisabled();
+    });
+
+    it("merges a caller-supplied accessibilityState, with the component's own disabled value winning on conflict", () => {
+        render(
+            <Button
+                label="Save"
+                accessibilityState={{ selected: true, disabled: true }}
+            />
+        );
+        expect(screen.getByRole("button")).toHaveProp("accessibilityState", {
+            selected: true,
+            disabled: false,
+        });
+    });
+
+    it("renders a leading and trailing icon when provided", () => {
+        render(
+            <Button
+                label="Save"
+                leadingIcon="content-save"
+                trailingIcon="chevron-right"
+            />
+        );
+        expect(
+            screen.UNSAFE_getByProps({ name: "content-save" })
+        ).toBeTruthy();
+        expect(
+            screen.UNSAFE_getByProps({ name: "chevron-right" })
+        ).toBeTruthy();
+    });
+
+    it("renders without error and applies a different border color for a different tone", () => {
+        render(<Button label="Save" tone="accent" />);
+        const accentBorder = flattenStyle(
+            screen.getByRole("button")
+        )?.borderColor;
+
+        render(<Button label="Save" tone="danger" />);
+        const dangerBorder = flattenStyle(
+            screen.getByRole("button")
+        )?.borderColor;
+
+        expect(dangerBorder).not.toEqual(accentBorder);
+    });
+
+    it("renders without error and applies a different icon size for a different size", () => {
+        // UNSAFE_getByProps matches the first node carrying the prop, which
+        // is ButtonIcon itself (the wrapper, which also has a `name` prop
+        // but no style) — UNSAFE_getAllByProps + the last match gets the
+        // actual rendered icon, several layers deeper, that carries fontSize.
+        render(
+            <Button label="Save" size="small" leadingIcon="content-save" />
+        );
+        const smallIconMatches = screen.UNSAFE_getAllByProps({
+            name: "content-save",
+        });
+        const smallIconSize = flattenStyle(
+            smallIconMatches[smallIconMatches.length - 1]
+        )?.fontSize;
+
+        render(
+            <Button label="Save" size="default" leadingIcon="content-save" />
+        );
+        const defaultIconMatches = screen.UNSAFE_getAllByProps({
+            name: "content-save",
+        });
+        const defaultIconSize = flattenStyle(
+            defaultIconMatches[defaultIconMatches.length - 1]
+        )?.fontSize;
+
+        expect(defaultIconSize).not.toEqual(smallIconSize);
+    });
+
+    it("renders without error and gives the secondary variant a visible border, unlike the default primary variant", () => {
+        render(<Button label="Save" />);
+        expect(flattenStyle(screen.getByRole("button"))?.borderWidth).toBe(0);
+
+        render(<Button label="Save" variant="secondary" />);
+        expect(
+            flattenStyle(screen.getByRole("button"))?.borderWidth
+        ).toBeGreaterThan(0);
+    });
+});
+
+describe("Button.Icon", () => {
+    it("renders the given icon", () => {
+        render(<Button.Icon name="close" accessibilityLabel="Close" />);
+        expect(screen.UNSAFE_getByProps({ name: "close" })).toBeTruthy();
+    });
+
+    it("calls onPress when pressed", () => {
+        const onPress = jest.fn();
+        render(
+            <Button.Icon
+                name="close"
+                accessibilityLabel="Close"
+                onPress={onPress}
+            />
+        );
+        fireEvent.press(screen.getByRole("button"));
+        expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onPress when disabled", () => {
+        const onPress = jest.fn();
+        render(
+            <Button.Icon
+                name="close"
+                accessibilityLabel="Close"
+                onPress={onPress}
+                disabled
+            />
+        );
+        fireEvent.press(screen.getByRole("button"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it("merges a caller-supplied accessibilityState, with the component's own disabled value winning on conflict", () => {
+        // This is the exact case that caught IconButton's original bug: the
+        // explicit accessibilityState prop was placed before {...pressableProps}
+        // in JSX, so a caller-supplied accessibilityState (which lands in
+        // pressableProps, since it isn't destructured out) silently replaced
+        // the whole computed accessibilityState object, disabled key included.
+        render(
+            <Button.Icon
+                name="close"
+                accessibilityLabel="Close"
+                accessibilityState={{ selected: true, disabled: true }}
+            />
+        );
+        expect(screen.getByRole("button")).toHaveProp("accessibilityState", {
+            selected: true,
+            disabled: false,
+        });
+    });
+});

packages/components/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { render, screen } from "test-utils";
+import { Divider } from "./index";
+
+describe("Divider", () => {
+    it("renders", () => {
+        render(<Divider testID="divider" />);
+        expect(screen.getByTestId("divider")).toBeTruthy();
+    });
+
+    it("is hidden from assistive technology", () => {
+        render(<Divider testID="divider" />);
+        const divider = screen.getByTestId("divider");
+        expect(divider).toHaveProp("accessible", false);
+        expect(divider).toHaveProp("importantForAccessibility", "no");
+    });
+
+    it("forwards additional view props", () => {
+        render(<Divider testID="divider" style={{ marginVertical: 8 }} />);
+        expect(screen.getByTestId("divider")).toHaveStyle({
+            marginVertical: 8,
+        });
+    });
+});