test: Add component view test framework #22265

racitores · 2025-11-06T17:30:49Z

Description

Introduces a Component-view testing framework with engine-only mocks, state-driven presets, and deterministic rendering helpers to speed up view-level tests without full E2E.

Adds initial tests for BridgeView and Wallet views leveraging presets and renderers.
Updates CI workflow to run component-view tests reliably across OS, and minor ESLint/test setup adjustments.

Adds local rules and documentation for Component-view tests.

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Introduces a component-view testing framework with mocks/presets/renderers, adds BridgeView and Wallet tests, and updates CI and test setup.

Tests:
- Framework: Add component-view testing utilities in app/util/test/component-view/ (mocks, render.tsx, state fixtures, presets, and view-specific renderers for Bridge and Wallet).
- View Tests: New tests for BridgeView and Wallet in app/components/UI/Bridge/Views/BridgeView/BridgeView.view.test.tsx and app/components/Views/Wallet/Wallet.view.test.tsx.
- Docs/Rules: Add local testing rules and documentation (.cursor/rules/*, INTEGRATION_TEST_RULES.md, README.md).
CI/Config:
- Update GitHub Actions workflow ci.yml to run component-view tests across environments.
- Adjust test setup in app/util/test/testSetup.js and platform helpers.
- Minor config updates in package.json and eslintrc.js to support the new tests.

^{Written by Cursor Bugbot for commit 74b633a. This will update automatically on new commits. Configure here.}

github-actions · 2025-11-06T17:30:59Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

app/util/test/component-view/stateFixture.ts

cursor · 2025-11-14T16:42:34Z

app/util/test/testSetup.js

+      } catch (_e) {
+        // Best-effort guard; if state is not available yet, skip enforcement
+      }
+      return Reflect.apply(target, thisArg, args);


Bug: Silent Error Suppression Breaks Runtime Guard

The runtime guard's error handling silently suppresses the intentional error thrown for forbidden mocks. The catch (_e) block catches both the expected "state not available" errors and the intentional "Forbidden jest.mock" errors, making the guard ineffective. The forbidden mock error should be re-thrown after being caught, or the try-catch should only wrap the state retrieval logic.

cursor · 2025-11-14T16:42:34Z

package.json

    "test": "yarn test:unit",
-    "test:unit": "jest ./app/ ./locales/ ./e2e/**/*.test.ts .github/**/*.test.ts",
+    "test:unit": "jest ./app/ ./locales/ ./e2e/**/*.test.ts .github/**/*.test.ts --testPathIgnorePatterns='.*\\.integration(\\..*)?\\.test\\.(ts|tsx)$'",
+    "test:integration": "jest --runInBand --no-watchman --verbose --testPathPattern='.*\\.integration(\\..*)?\\.test\\.(ts|tsx)$'",


Bug: Align Test Patterns with Supported File Types

The test script patterns only match .ts and .tsx files but the ESLint rules, documentation, and Cursor rules all specify support for .js and .jsx integration tests as well. The testPathIgnorePatterns and testPathPattern regexes should include (ts|tsx|js|jsx) instead of just (ts|tsx) to match the documented behavior and ESLint configuration.

cursor · 2025-11-17T10:26:19Z

app/util/test/testSetup.js

+      return Reflect.apply(target, thisArg, args);
+    },
+  });
+})();


Bug: Silent Error Catch Undermines Mock Security

The runtime guard wraps jest.mock in a Proxy but catches and silently ignores all errors in the try-catch block at line 154. This means if global.expect?.getState?.() throws an error (not just returns undefined), the guard fails silently and allows unauthorized mocks through. The catch should only suppress errors when state is unavailable, not all errors including the intentional throw new Error at line 145 that enforces the whitelist.

cursor · 2025-11-17T10:29:49Z

app/util/test/testSetup.js

+      return Reflect.apply(target, thisArg, args);
+    },
+  });
+})();


Bug: Guard's Silent Catch Undermines Enforcement

The runtime guard's catch block silently swallows all errors, including the enforcement error itself. When jest.mock is called with a forbidden module in an integration test, the thrown error gets caught and ignored, defeating the guard's purpose. The catch should only suppress errors from accessing expect.getState(), not from the enforcement logic.

cursor · 2025-11-17T10:29:49Z

package.json

    "release:android:qa": "./scripts/build.sh android QA && open android/app/build/outputs/apk/release/",
    "test": "yarn test:unit",
-    "test:unit": "jest ./app/ ./locales/ ./e2e/**/*.test.ts .github/**/*.test.ts",
+    "test:unit": "jest ./app/ ./locales/ ./e2e/**/*.test.ts .github/**/*.test.ts --testPathIgnorePatterns='.*\\.integration(\\..*)?\\.test\\.(ts|tsx)$'",


Bug: CLI flags break Jest test path exclusion.

The --testPathIgnorePatterns CLI flag in test:unit overrides the testPathIgnorePatterns array in jest.config.js, causing unit tests to no longer ignore e2e specs, pages, and selectors. Jest CLI arguments replace rather than merge with config file settings, so the patterns for e2e files ('.*/e2e/specs/.*\\.spec\\.(ts|js)$', '.*/e2e/pages/', '.*/e2e/selectors/') are lost.

cursor · 2025-11-17T15:58:45Z

app/util/test/testSetup.js

+        const testPath = state?.testPath ?? '';
+        const isComponentViewTest = /\.[iI]view(\..*)?\.test\.(t|j)sx?$/.test(
+          testPath,
+        );


Bug: Case-Insensitive Regex Fails View Enforcement

The regex pattern /\.[iI]view(\..*)?\.test\.(t|j)sx?$/ uses [iI] which matches both lowercase i and uppercase I, but the intended pattern is .view (with lowercase v). This causes the guard to match files like .iview.test.ts or .Iview.test.ts instead of the documented .view.test.ts pattern, failing to enforce mocking restrictions on actual component-view test files.

cursor · 2025-11-17T15:58:45Z

package.json

    "test": "yarn test:unit",
-    "test:unit": "jest ./app/ ./locales/ ./e2e/**/*.test.ts .github/**/*.test.ts",
+    "test:unit": "jest ./app/ ./locales/ ./e2e/**/*.test.ts .github/**/*.test.ts --testPathIgnorePatterns='.*/e2e/specs/.*\\.spec\\.(ts|tsx|js)$|.*\\.view(\\..*)?\\.test\\.(ts|tsx)$'",
+    "test:view": "jest --runInBand --no-watchman --verbose --testPathPattern='.*\\.view(\\..*)?\\.test\\.(ts|tsx)$'",


Bug: JS/JSX test files lack proper isolation.

The test patterns in test:unit and test:view only match .ts and .tsx files via (ts|tsx), but documentation and ESLint rules specify support for .js and .jsx files as well (*.view.test.{ts,tsx,js,jsx}). This causes .view.test.js and .view.test.jsx files to run in unit tests instead of being properly isolated.

cursor · 2025-11-18T11:07:30Z

app/util/test/testSetup.js

+        // Expect state is available when evaluating test files
+        const state = global.expect?.getState?.();
+        const testPath = state?.testPath ?? '';
+        const isComponentViewTest = /\.[iI]view(\..*)?\.test\.(t|j)sx?$/.test(


Bug: Unauthorized Mocks Infiltrate View Tests

The regex pattern /\.[iI]view(\..*)?\.test\.(t|j)sx?$/ matches files with .iview or .Iview but not .view (lowercase 'v'). The actual test files use .view.test.tsx naming. This prevents the runtime guard from enforcing mock restrictions in component-view tests, allowing unauthorized mocks that should be blocked.

sonarqubecloud · 2025-11-18T11:27:13Z

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
5 Security Hotspots
0.0% Coverage on New Code
4.8% Duplication on New Code

See analysis details on SonarQube Cloud

github-actions · 2025-11-18T12:27:44Z

🔍 Smart E2E Test Selection

Selected E2E tags: None (no tests recommended)
Risk Level: low
AI Confidence: 85%

click to see 🤖 AI reasoning details

After thorough analysis of all 20 changed files, I conclude that NO E2E test tags need to be run:

Analysis Summary:

CRITICAL FILE - package.json: Could not get git diff, but based on the file content review, this appears to be version 7.60.0 with standard dependencies. Without a diff, I cannot confirm changes, but the file content looks stable with typical MetaMask Mobile dependencies.
Test Infrastructure Changes (Primary Focus): The bulk of changes are concentrated in a NEW component-view testing framework:
- app/util/test/component-view/* - New test framework directory with:
  - README.md, INTEGRATION_TEST_RULES.md - Documentation
  - mocks.ts, render.tsx, stateFixture.ts - Test utilities
  - presets/bridge.ts, presets/wallet.ts - Test presets
  - renderers/bridge.ts, renderers/wallet.ts - Render helpers
- BridgeView.view.test.tsx, Wallet.view.test.tsx - New UNIT tests using the framework
- These are unit/integration tests for React components, NOT E2E tests
Configuration Updates:
- .eslintrc.js - ESLint rules to enforce the new component-view test patterns
- app/util/test/testSetup.js - Jest setup with runtime guards for test purity
- app/util/test/platform.ts - Platform testing helpers
Cursor/Documentation Changes:
- .cursor/rules/component-view-testing.mdc - Cursor AI context rules
- .cursor/rules/pr-creation-guidelines.mdc - PR guidelines
- These are developer experience improvements
CI Workflow (.github/workflows/ci.yml): Could not get diff, but the file shows it already has component-view test job (component-view-test) that runs yarn test:view. This will validate the new framework.
State logs (state-logs-v7.59.0-(2968).json): This appears to be debug/telemetry data, not production code

Key Findings:

These changes introduce a NEW unit testing framework for React component views
The framework focuses on testing UI components with mocked Engine/Redux state
No production code changes detected
No changes to E2E test specs, pages, selectors, or infrastructure
The CI workflow already includes validation for component-view tests
This is purely a testing infrastructure enhancement

Why No E2E Tags:

Changes are test infrastructure only (unit/integration tests, not E2E)
No production application code modified
No E2E test framework changes (e2e/framework, e2e/specs, etc.)
Component-view tests run separately via yarn test:view in CI
These tests validate React components in isolation, not end-to-end user flows

Risk Assessment: LOW

No user-facing functionality changes
Test infrastructure is self-contained and validated by CI
The framework is additive (new capability) without removing existing tests
ESLint and runtime guards ensure proper usage

View GitHub Actions results

cursor · 2025-11-18T12:28:44Z

app/util/test/testSetup.js

+        // Expect state is available when evaluating test files
+        const state = global.expect?.getState?.();
+        const testPath = state?.testPath ?? '';
+        const isComponentViewTest = /\.[iI]view(\..*)?\.test\.(t|j)sx?$/.test(


Bug: Security Guard's Blind Spot

The runtime guard regex /\.[iI]view(\..*)?\.test\.(t|j)sx?$/ expects files matching .iview.test.* or .Iview.test.*, but the actual component-view test files follow the pattern .view.test.* (lowercase 'v' without 'i' prefix). The regex [iI]view matches only iview or Iview, not view. This causes the runtime enforcement to never trigger for component-view tests, allowing unauthorized mocks that should be blocked.

cortisiko

left a few comments related to using TestIDs. otherwise it looks good @racitores

cortisiko · 2025-11-19T17:27:45Z

app/components/UI/Bridge/Views/BridgeView/BridgeView.view.test.tsx

+    });
+
+    // Type 9.5 using keypad buttons
+    const scroll = getByTestId('bridge-view-scroll');


Can we, similar to the e2e tests use the testIDs defined in the testID object? this way we have a consistent way of storing and using testIDs within e2e and integration tests? In this case, we can import selector string here and use it

cortisiko · 2025-11-19T17:27:58Z

app/components/UI/Bridge/Views/BridgeView/BridgeView.view.test.tsx

+
+    // Ensure keypad is visible
+    await waitFor(() => {
+      expect(queryByTestId('keypad-delete-button')).toBeTruthy();


similar to https://github.com/MetaMask/metamask-mobile/pull/22265/files#r2542952200

cortisiko · 2025-11-19T17:28:06Z

app/components/UI/Bridge/Views/BridgeView/BridgeView.view.test.tsx

+      });
+
+    // Close possible banner to reveal keypad
+    const closeBanner = queryByTestId('banner-close-button-icon');


similar to https://github.com/MetaMask/metamask-mobile/pull/22265/files#r2542952200

racitores added No QA Needed Apply this label when your PR does not need any QA effort. skip-e2e skip E2E test jobs labels Nov 6, 2025

metamaskbot added the team-qa QA team label Nov 6, 2025

github-actions bot added the size-XL label Nov 6, 2025

racitores changed the title ~~test: refactor bridgeView tests~~ test: PoC integration test: refactor bridgeView tests Nov 11, 2025

racitores force-pushed the raci/refactor-bridgeview-test branch from 44f8f09 to 464984b Compare November 13, 2025 15:57

racitores marked this pull request as ready for review November 13, 2025 15:58

racitores requested a review from a team as a code owner November 13, 2025 15:58

racitores added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label Nov 13, 2025

cursor bot reviewed Nov 13, 2025

View reviewed changes

app/util/test/component-view/stateFixture.ts Show resolved Hide resolved

racitores changed the title ~~test: PoC integration test: refactor bridgeView tests~~ test: Add integration test framework Nov 13, 2025

cursor bot reviewed Nov 14, 2025

View reviewed changes

racitores added 15 commits November 17, 2025 11:20

test: refactor bridgeView tests

098c746

test: integration test bridgeView

4d606af

test: refactor network interceptors

01fbc00

test: refactor to framework

78ec39e

test: add more tests

b39d7ae

test: new integration test - only engine mocked

c8caadc

test: refactor and adding new tests

0baab63

test: test pass and initial framework

0a64d7c

test: add 2 new test with navigation and quote

474af02

test: add cursor rules

2cc9d1a

test: remove unused files

db88412

test: remove unused files

6f7f6de

test: refactor

1c54e2c

test: revert debug changes in ci

b9dba18

test: add os support

94c3a78

racitores force-pushed the raci/refactor-bridgeview-test branch from 7009fb7 to 94c3a78 Compare November 17, 2025 10:24

cursor bot reviewed Nov 17, 2025

View reviewed changes

fix: rebase

25df882

cursor bot reviewed Nov 17, 2025

View reviewed changes

racitores added 4 commits November 17, 2025 11:32

fix: rebase

e3eb012

fix: integration tests

76d3831

fix: remove spec from unit-test

0a46fbc

ci: fix pipeline + update test

2b4b451

racitores force-pushed the raci/refactor-bridgeview-test branch from 7c6dd34 to 2b4b451 Compare November 17, 2025 12:00

chore: refactor

1d04ecc

cursor bot reviewed Nov 17, 2025

View reviewed changes

racitores changed the title ~~test: Add integration test framework~~ test: Add component view test framework Nov 17, 2025

Merge branch 'main' into raci/refactor-bridgeview-test

079d1d2

cursor bot reviewed Nov 18, 2025

View reviewed changes

chore: fix mocks

74b633a

cursor bot reviewed Nov 18, 2025

View reviewed changes

cortisiko requested changes Nov 19, 2025

View reviewed changes

Uh oh!

test: Add component view test framework #22265

Are you sure you want to change the base?

test: Add component view test framework #22265

Uh oh!

Conversation

racitores commented Nov 6, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Nov 6, 2025

Uh oh!

Uh oh!

cursor bot Nov 14, 2025

Choose a reason for hiding this comment

Bug: Silent Error Suppression Breaks Runtime Guard

Uh oh!

cursor bot Nov 14, 2025

Choose a reason for hiding this comment

Bug: Align Test Patterns with Supported File Types

Uh oh!

cursor bot Nov 17, 2025

Choose a reason for hiding this comment

Bug: Silent Error Catch Undermines Mock Security

Uh oh!

cursor bot Nov 17, 2025

Choose a reason for hiding this comment

Bug: Guard's Silent Catch Undermines Enforcement

Uh oh!

cursor bot Nov 17, 2025

Choose a reason for hiding this comment

Bug: CLI flags break Jest test path exclusion.

Uh oh!

cursor bot Nov 17, 2025

Choose a reason for hiding this comment

Bug: Case-Insensitive Regex Fails View Enforcement

Uh oh!

cursor bot Nov 17, 2025

Choose a reason for hiding this comment

Bug: JS/JSX test files lack proper isolation.

Uh oh!

cursor bot Nov 18, 2025

Choose a reason for hiding this comment

Bug: Unauthorized Mocks Infiltrate View Tests

Uh oh!

sonarqubecloud bot commented Nov 18, 2025

Quality Gate passed

Uh oh!

github-actions bot commented Nov 18, 2025

🔍 Smart E2E Test Selection

Uh oh!

cursor bot Nov 18, 2025

Choose a reason for hiding this comment

Bug: Security Guard's Blind Spot

Uh oh!

cortisiko left a comment

Choose a reason for hiding this comment

Uh oh!

cortisiko Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

cortisiko Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

cortisiko Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

racitores commented Nov 6, 2025 •

edited by cursor bot

Loading