Fixes #2669 : Refactored src/screen/PageNotFound component test from jest to vitest #2670
Conversation
WalkthroughThis pull request focuses on migrating test files from Jest to Vitest, specifically updating the testing framework for three files: Changes
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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 comments (1)
src/screens/PageNotFound/PageNotFound.spec.tsx (1)
Migration requires cleanup of Jest dependencies and configuration
The codebase is in a transitional state with both Jest and Vitest configurations:
- Vitest is properly set up with
vitest.config.tsand dependencies (vitest,@vitest/coverage-istanbul)- However, Jest artifacts remain (
jest.config.jsand 8 Jest-related dependencies)The test file itself uses Vitest imports (
import { test, expect, describe } from 'vitest'), but the presence of Jest configuration and dependencies suggests an incomplete migration. These should be removed to prevent confusion and potential conflicts.Cleanup needed:
- Remove
jest.config.js- Remove Jest-related dependencies from
package.json- Ensure all test utilities are imported from Vitest instead of Jest
🔗 Analysis chain
Line range hint
1-57: Verify complete migration from Jest to VitestLet's ensure no Jest-specific code or patterns remain in the codebase.
Migration to Vitest is incomplete - Jest dependencies and configuration still present
- Found
jest.config.jsconfiguration file still present in the repository- Multiple Jest-related dependencies in
package.json:
- Core Jest packages:
jest,babel-jest- Jest DOM testing:
@testing-library/jest-dom- Type definitions:
@types/jest- ESLint plugin:
eslint-plugin-jest- Mocking utilities:
jest-localstorage-mock,jest-location-mock- Testing tools:
jest-previewLet's verify if there are any Jest-specific test patterns being used across test files:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any remaining Jest-specific patterns or configurations echo "Checking for Jest patterns in the test file..." rg -i "jest\." src/screens/PageNotFound/PageNotFound.spec.tsx echo "Checking for Jest configuration files..." fd -g "jest.config.*" echo "Checking for Jest dependencies in package.json..." if [ -f "package.json" ]; then jq '.dependencies + .devDependencies | with_entries(select(.key | contains("jest")))' package.json fiLength of output: 789
Script:
#!/bin/bash # Search for common Jest-specific patterns in test files echo "Checking for Jest-specific test patterns..." rg -i "beforeAll|afterAll|beforeEach|afterEach|jest\.|describe|test|it|expect" --type ts --type tsx -g "*spec*" -g "*test*" -l # Check if Vitest is properly configured echo "Checking for Vitest configuration..." fd -g "vitest.config.*" # Check if there are any Vitest dependencies if [ -f "package.json" ]; then echo "Checking Vitest dependencies..." jq '.dependencies + .devDependencies | with_entries(select(.key | contains("vitest")))' package.json fiLength of output: 647
🧹 Nitpick comments (2)
src/screens/PageNotFound/PageNotFound.spec.tsx (2)
Line range hint
16-16: Remove commented codeThe commented line
//setItem('AdminFor', undefined);appears to be unused. If it's not needed, it should be removed to maintain clean test code.- //setItem('AdminFor', undefined);
Line range hint
35-57: Consider adding test cleanup for admin test caseThe admin test sets items in localStorage but doesn't clean them up afterward. This could potentially affect other tests.
Consider adding cleanup after the test:
test('Component should be rendered properly for ADMIN or SUPERADMIN', () => { setItem('AdminFor', [ { _id: '6537904485008f171cf29924', __typename: 'Organization', }, ]); + afterEach(() => { + setItem('AdminFor', undefined); + }); render(
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/screens/PageNotFound/PageNotFound.spec.tsx(1 hunks)
🔇 Additional comments (1)
src/screens/PageNotFound/PageNotFound.spec.tsx (1)
11-11: LGTM: Clean Vitest integration
The Vitest import is correctly added while maintaining the necessary @testing-library/react imports for component rendering.
|
Test Application fails at Jest Test in Chat.test.tsx. This PR changes only src/screen/PageNotFound.test.tsx (src/screen/PageNotFound.spec.tsx) |
|
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
jest.config.js (1)
Keep jsdom polyfill in Jest configuration
The removal of
react-app-polyfill/jsdomfrom setupFiles is risky as:
- The project uses
jsdomas test environment (confirmed in both Jest and Vitest configs)- There are 140+ Jest test files that haven't been migrated to Vitest yet
- No direct jsdom polyfill imports were found, suggesting tests rely on the global setup
The safe approach is to keep both polyfills:
- setupFiles: ['whatwg-fetch'], + setupFiles: ['react-app-polyfill/jsdom', 'whatwg-fetch'],🔗 Analysis chain
Line range hint
12-13: Verify the removal of jsdom polyfillThe change from
react-app-polyfill/jsdomtowhatwg-fetchseems unrelated to the Vitest migration of the PageNotFound component. This modification could potentially break other Jest tests that depend on jsdom polyfills.Let's verify the impact on other Jest tests:
Consider keeping both polyfills to maintain compatibility:
- // setupFiles: ['react-app-polyfill/jsdom'], - setupFiles: ['whatwg-fetch'], + setupFiles: ['react-app-polyfill/jsdom', 'whatwg-fetch'],🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for jsdom usage in test files # Expected: No test files should directly rely on jsdom features without the polyfill # Search for DOM manipulation in test files rg -l 'document\.|window\.|navigator\.' --type ts --type tsx '.*\.test\.(ts|tsx)$' || echo "No direct DOM usage found" # List all test files still using Jest (excluding PageNotFound) fd -e test.tsx -e test.ts | grep -v "PageNotFound.test.tsx" || echo "No other Jest test files found"Length of output: 10676
Script:
#!/bin/bash # Let's check if any test files are using DOM-related features that might need jsdom rg -l -t ts -t tsx 'render\(|screen\.|fireEvent\.|userEvent\.' '.*\.test\.(ts|tsx)$' || echo "No testing-library DOM usage found" # Check if there are any direct imports of jsdom-related polyfills rg -l "import.*react-app-polyfill/jsdom" || echo "No direct jsdom polyfill imports found" # Check setupFiles configuration in other test setup files fd "setup|config" -e js -e ts | xargs cat 2>/dev/null | grep -i "setupFiles\|jsdom\|whatwg" || echo "No other setup files found"Length of output: 628
🧰 Tools
🪛 eslint
[error] 46-46: Delete
·(prettier/prettier)
🧹 Nitpick comments (1)
jest.config.js (1)
Line range hint
1-85: Architecture Advice: Consider Separating Test ConfigurationsSince you're gradually migrating tests from Jest to Vitest, consider maintaining separate configurations to avoid confusion and potential conflicts:
- Keep Jest config focused on remaining Jest tests
- Use a separate Vitest config for migrated tests
- Document the migration strategy
Would you like help creating a migration strategy document or setting up a separate Vitest configuration?
🧰 Tools
🪛 eslint
[error] 46-46: Delete
·(prettier/prettier)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
__mocks__/styleMock.ts(1 hunks)jest.config.js(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- mocks/styleMock.ts
🧰 Additional context used
🪛 eslint
jest.config.js
[error] 46-46: Delete ·
(prettier/prettier)
🔇 Additional comments (1)
jest.config.js (1)
45-46: 🛠️ Refactor suggestion
Question: Are these CSS module changes necessary?
The PR's objective is to migrate a single test file to Vitest, but these CSS module mappings affect all Jest tests. While these changes might fix CSS-related test failures:
- They seem beyond the scope of the PR
- They might mask underlying issues that should be addressed separately
Additionally, there's a trailing whitespace on line 46 that should be removed.
Let's verify if these mappings are actually needed:
If these changes are necessary:
- They should be part of a separate PR focused on fixing CSS module handling
- The trailing whitespace should be removed:
- '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.ts',
+ '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.ts',🧰 Tools
🪛 eslint
[error] 46-46: Delete ·
(prettier/prettier)
|
…OrganizationScreen.test.tsx
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop-postgres #2670 +/- ##
====================================================
- Coverage 92.23% 86.00% -6.24%
====================================================
Files 295 312 +17
Lines 7036 8134 +1098
Branches 1516 1841 +325
====================================================
+ Hits 6490 6996 +506
- Misses 342 967 +625
+ Partials 204 171 -33 ☔ View full report in Codecov by Sentry. |
Lemme know what can I do. Thank you |
There was a problem hiding this comment.
Your PR has too many unnecessary files that don’t relate to your issue. You can from the PR by running the commands below from the root directory of the repository
git add -u
git reset HEAD path/to/file
git commit
Please apply these changes to this file src/components/OrganizationScreen/OrganizationScreen.test.tsx.
…jest to vitest (#2708) * Refactored Refactor: src/screens/PageNotFound from Jest to Vitest * Refactored :src/screens/PageNotFound from Jest to Vitest * Refactored :src/screens/PageNotFound from Jest to Vitest * Refactored :src/screens/PageNotFound from Jest to Vitest
What kind of change does this PR introduce?
Refactoring
This PR also fixes last #2669 PR which shows 2 file change but only 1 file changed (src/screen/PageNotFound.test.tsx)
Issue Number:
#2568
Fixes #
Snapshots/Videos:
Summary
src/components/OrganizationScreen/OrganizationScreen.test.tsxDoes this PR introduce a breaking change?
No
Other information
Have you read the contributing guide?
Yes
Summary by CodeRabbit
PageNotFoundcomponent to usevitest.OrganizationScreentests to assert CSS class names based on module exports rather than hardcoded values.jest.config.js.