Fix the build failure because of imports

[daneshk]

Description

Root cause:
@wso2/oxygen-ui ships an ESM-only bundle (mixed var declarations + import statements) that Jest's CommonJS runtime cannot parse. It also pulls in more ESM-only transitive deps (@mui/x-data-grid, date-fns, @mui/x-date-pickers), making the
The transformIgnorePatterns approach is a whack-a-mole.

Changes made:

1. package.json — added two moduleNameMapper entries:
   - @wso2/oxygen-ui → proxied to a local mock that re-exports from @mui/material (CJS-compatible)
   - @wso2/oxygen-ui-icons-react → redirected to its .cjs build (it ships both ESM and CJS)
2. src/mocks/@wso2/oxygen-ui.js (new) — lightweight proxy that re-exports from @mui/material
3. src/setupTests.ts — added polyfills for TextEncoder/TextDecoder (needed by @mui/x-data-grid) and ResizeObserver (used by ConnectorCard)
4. ConnectorCard.test.tsx — fixed pre-existing test bugs: added MemoryRouter wrapper (component uses ), updated name assertions to match getDisplayName output ('github' → 'GitHub', 'aws.s3' → 'AWS S3'), updated link tests to reflect current router-based navigation
5. Pagination.test.tsx — fixed case mismatch ('50 items' → '50 Items') and zero-items text ('Showing 1-0 of 0' → 'Showing 0-0 of 0')
6. SearchBar.test.tsx — changed icon assertion from MUI-style [data-testid="SearchIcon"] to svg (Lucide icons don't use data-testid)

---

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR fixes the Jest test suite to work with the current codebase. package.json gains two new moduleNameMapper entries: @wso2/oxygen-ui is redirected to a new local mock file, and @wso2/oxygen-ui-icons-react is redirected to its CJS distribution. The new mock at src/__mocks__/@wso2/oxygen-ui.js re-exports @mui/material and @mui/material/styles, mapping OxygenUIThemeProvider to ThemeProvider and providing fallbacks for extendTheme and useColorScheme. setupTests.ts receives TextEncoder/TextDecoder polyfills and a no-op ResizeObserver mock. Existing tests for ConnectorCard, Pagination, and SearchBar are updated to match current component behavior: ConnectorCard tests gain a MemoryRouter wrapper and revised link assertions, Pagination option labels are capitalized, and the SearchBar icon lookup switches from data-testid to an SVG query.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is vague and does not clearly describe the specific changes. While it mentions "build failure" and "imports," it does not indicate the actual root cause (Jest/ESM compatibility issues) or the scope of changes (mock configuration, test fixes, polyfills).	Consider a more specific title such as "Fix Jest/ESM compatibility issues with @wso2/oxygen-ui imports" or "Mock @wso2/oxygen-ui to resolve build failures and update tests."

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the root cause, lists all six changes, and provides rationale for each modification. It aligns well with the PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/SearchBar/SearchBar.test.tsx`:
- Around line 82-83: The querySelector on document is too broad and can match
unrelated SVGs in the test suite, causing false positives. Instead of using
document.querySelector('svg'), scope the query to only the rendered SearchBar
component's container. Query the SVG element from within the specific render
tree of the SearchBar component (typically by getting a reference to the
rendered container or using a more specific selector that targets elements
within the SearchBar component specifically) so that the test validates only the
SearchBar's SVG element.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6f9db528-90cb-4daf-8457-e5763bf8c9c2

📥 Commits

Reviewing files that changed from the base of the PR and between 70d2ed2 and e83b092.

📒 Files selected for processing (6)

• package.json
• src/__mocks__/@wso2/oxygen-ui.js
• src/components/ConnectorCard/ConnectorCard.test.tsx
• src/components/Pagination/Pagination.test.tsx
• src/components/SearchBar/SearchBar.test.tsx
• src/setupTests.ts