Refactor Tests: Migrate src/screens/UserPortal/UserScreen/UserScreen.tsx from Jest to Vitest #2632
Conversation
WalkthroughThe pull request introduces modifications to the unit tests for the Changes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (6)
src/screens/UserPortal/UserScreen/UserScreen.spec.tsx (6)
1-10: Documentation could be more comprehensiveWhile the JSDoc comments are good, consider adding more details about:
- Test setup and mocking strategy
- Window resize test scenarios
- Expected component behaviors
29-37: Consider adding error handling to the router mockThe router mock implementation is correct for Vitest, but consider adding error handling for the
importActualcall:vi.mock('react-router-dom', async () => { - const actual = await vi.importActual('react-router-dom'); + try { + const actual = await vi.importActual('react-router-dom'); + return { + ...actual, + useParams: () => ({ orgId: mockID }), + useLocation: () => ({ pathname: mockLocation }), + useNavigate: vi.fn(), + }; + } catch (error) { + console.error('Failed to mock react-router-dom:', error); + throw error; + } - return { - ...actual, - useParams: () => ({ orgId: mockID }), - useLocation: () => ({ pathname: mockLocation }), - useNavigate: vi.fn(), - }; });
91-95: Add afterEach cleanup for complete test isolationWhile beforeEach is properly implemented, consider adding afterEach to reset the window size:
describe('UserScreen tests with LeftDrawer functionality', () => { beforeEach(() => { mockID = '123'; mockLocation = '/user/organization/123'; }); + afterEach(() => { + // Reset window size to default + window.innerWidth = 1024; + vi.clearAllMocks(); + });
Line range hint
133-161: Enhance LeftDrawer toggle test coverageThe toggle tests could be more comprehensive. Consider adding these scenarios:
it('toggles LeftDrawer correctly based on window size and user interaction', () => { // ... existing setup ... // Existing tests resizeWindow(800); clickToggleMenuBtn(toggleButton); expect(icon).toHaveClass('fa fa-angle-double-left'); + // Test rapid window size changes + resizeWindow(700); + resizeWindow(1200); + expect(icon).toHaveClass('fa fa-angle-double-left'); + + // Test boundary conditions + resizeWindow(992); // Typical breakpoint + clickToggleMenuBtn(toggleButton); + expect(icon).toHaveClass('fa fa-angle-double-right'); });
Line range hint
164-182: Strengthen navigation test assertionsThe navigation test could be more robust:
it('redirects to root when orgId is undefined', () => { mockID = undefined; const navigate = vi.fn(); vi.spyOn({ useNavigate }, 'useNavigate').mockReturnValue(navigate); render( <MockedProvider addTypename={false} link={link}> // ... component render ... </MockedProvider>, ); expect(window.location.pathname).toEqual('/'); + // Add these assertions + expect(navigate).toHaveBeenCalledTimes(1); + expect(navigate).toHaveBeenCalledWith('/'); + + // Verify no rendering of main content + expect(screen.queryByTestId('closeMenu')).not.toBeInTheDocument(); });
Migration to Vitest is incomplete - Jest dependencies and configuration still present
The codebase still contains Jest-related dependencies and configuration:
jest.config.jsfile exists in the root directory- Multiple Jest-related packages in package.json:
@testing-library/jest-dom@types/jestbabel-jesteslint-plugin-jestjestjest-localstorage-mockjest-location-mockjest-preview- Jest-related scripts in package.json:
"test": "cross-env NODE_ENV=test jest --env=./scripts/custom-test-env.js --watchAll --coverage""jest-preview": "jest-preview"While the test file has been migrated to use Vitest, the project still needs to clean up Jest-related configurations and dependencies.
🔗 Analysis chain
Line range hint
1-182: Verify complete removal of Jest-specific codeLet's ensure no Jest-specific code remains in the codebase:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any remaining Jest-specific code echo "Checking for remaining Jest-specific code..." rg -i "jest\." --type ts --type tsx echo "Checking for jest imports..." rg -i "from ['|\"]jest['|\"]" --type ts --type tsx echo "Checking for jest type references..." rg -i "@types/jest" --type ts --type tsxLength of output: 468
Script:
#!/bin/bash # Search for any remaining Jest-specific code with correct file type patterns echo "Checking for remaining Jest-specific code..." rg -i "jest\." -t js -t jsx -t ts -t typescript echo "Checking for jest imports..." rg -i "from ['|\"]jest['|\"]" -t js -t jsx -t ts -t typescript echo "Checking for jest type references..." rg -i "@types/jest" -t js -t jsx -t ts -t typescript # Also check for jest.config files echo "Checking for jest config files..." fd -e js -e json -e ts "jest.config" # Check package.json for jest dependencies echo "Checking package.json for jest dependencies..." cat package.json | grep -i "jest"Length of output: 1200
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
src/screens/UserPortal/UserScreen/UserScreen.spec.tsx(6 hunks)vitest.config.ts(2 hunks)
🔇 Additional comments (1)
vitest.config.ts (1)
Line range hint 5-14: LGTM: SVG plugin configuration is properly added
The addition of svgrPlugin is appropriate for handling SVG files as React components in the test environment.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #2632 +/- ##
=====================================================
- Coverage 95.73% 83.75% -11.99%
=====================================================
Files 295 312 +17
Lines 7036 8118 +1082
Branches 1516 1830 +314
=====================================================
+ Hits 6736 6799 +63
- Misses 99 1180 +1081
+ Partials 201 139 -62 ☔ View full report in Codecov by Sentry. |
|
@varshith257 done brother make this new pr against develop-postgress. Review it. |
|
@PurnenduMIshra129th Please fix the failed introspection test. |
|
i don't think think this issue is related to this pr because i only change in 2 file one is UserScreen.spec.tsx and vitetest.config.test . i have not changed any files in graphql queries . |
|
Shouldn't the |
|
@palisadoes yes i renamed the file name UserScreen.test.tsx to UserScreen.spec.tsx |
palisadoes
merged commit a318390
into
PalisadoesFoundation:develop-postgres
What kind of change does this PR introduce?
It is a refactor of changing the test case migration of jest to vitest.
Issue Number:
Fixes issue no . #2580
Did you add tests for your changes?
Yes after changing the code to vitest i ran the command npm run vitest and it is successfully completed. I will provide screenshots.
Snapshots/Videos:
Summary
In this Pr the screen is now tested with vitest . which is more faster than jest which is previously used. And one by one all the screens are migrating to vitest so this is one of them.
Does this PR introduce a breaking change?
No this does not affect the existing code flow.
Have you read the [contributing guide]
Yes
Summary by CodeRabbit
Tests
beforeEachblock for consistency.Chores
svgrPluginto the Vitest configuration for handling SVG files as React components.