migration of People.test.tsx from jest to vitest #2609
Conversation
WalkthroughThe changes in this pull request involve significant updates to the project's configuration and testing framework. The ESLint configuration has been revised to enhance TypeScript linting rules, while the Changes
Assessment against linked issues
Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Congratulations on making your first PR! 🎊 If you haven't already, check out our Contributing Guidelines and PR Reporting Guidelines to ensure that you are following our guidelines for contributing and creating PR.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (7)
vitest.config.ts (1)
19-34: Coverage configuration is comprehensive.The coverage setup includes:
- Istanbul provider
- Multiple report formats
- Appropriate exclusions
- Dedicated reports directory
One suggestion: Consider adding minimum coverage thresholds to maintain code quality.
coverage: { enabled: true, provider: 'istanbul', reportsDirectory: './coverage/vitest', + thresholds: { + lines: 80, + functions: 80, + branches: 80, + statements: 80 + }, exclude: [src/setupTests.ts (1)
28-31: Consider replacing jest-preview with vitest-preview.Since we're migrating from Jest to Vitest, consider using vitest-preview instead of commenting out jest-preview.
Would you like me to provide the configuration for vitest-preview?
.eslintrc.json (2)
79-85: Consider relaxing interface naming restrictionsThe current configuration requires all interfaces to have either "Interface" or "TestInterface" prefix, which might be too restrictive and goes against common TypeScript conventions. Consider removing the prefix requirement to allow more natural interface naming.
{ "selector": "interface", - "format": ["PascalCase"], - "prefix": ["Interface", "TestInterface"] + "format": ["PascalCase"] }
Line range hint
1-15: Update ESLint configuration for VitestThe configuration still includes Jest plugin in extends array while the project is migrating to Vitest. Consider adding Vitest ESLint plugin and removing Jest-specific configuration.
"extends": [ "plugin:react/recommended", "eslint:recommended", - "plugin:jest/recommended", + "plugin:vitest/recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended", "eslint-config-prettier", "prettier" ],package.json (1)
Line range hint
91-96: Remove Jest ESLint configurationThe ESLint configuration still includes Jest-specific settings. These should be removed as part of the migration to Vitest.
"eslintConfig": { "extends": [ "react-app", - "react-app/jest" ] },src/screens/UserPortal/People/People.test.tsx (2)
Line range hint
98-106: Replace custom wait function with Vitest utilitiesThe custom wait function can be replaced with Vitest's built-in timer utilities for better test reliability.
-async function wait(ms = 100): Promise<void> { - await act(() => { - return new Promise((resolve) => { - setTimeout(resolve, ms); - }); - }); -} +import { vi } from 'vitest'; +const wait = async () => { + await vi.advanceTimersByTimeAsync(100); +};
117-123: Add mock cleanup after testsConsider adding mock cleanup to ensure tests don't affect each other.
vi.mock('react-router-dom', async () => { const actual = await vi.importActual('react-router-dom'); return { ...actual, useParams: () => ({ orgId: '' }), }; }); +afterEach(() => { + vi.clearAllMocks(); +});
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
.eslintrc.json(4 hunks)package.json(3 hunks)src/screens/UserPortal/People/People.test.tsx(5 hunks)src/setupTests.ts(2 hunks)tsconfig.json(1 hunks)vitest.config.ts(1 hunks)
🔇 Additional comments (7)
vitest.config.ts (2)
15-18: LGTM! Test configuration is well structured.
The test configuration properly includes:
- Correct test file patterns for both .spec and .test files
- Global variables enabled for Vitest globals
- JSDOM environment for DOM testing
- Setup file correctly referenced
9-11: Verify if additional node polyfills are needed.
The configuration only includes the 'events' polyfill. Consider if other Node.js built-in modules are used in the tests that might need polyfilling.
✅ Verification successful
The 'events' polyfill is sufficient for test files
The codebase scan shows that among Node.js built-ins, only fs, path, and util are used, and these are primarily in setup scripts and test utilities, not in the actual test files that Vitest would run. The existing 'events' polyfill is adequate for the test environment as:
- The
fsusage in test files is only incheckEnvFile.test.tswhich is testing file system operations - The
utilimport insetupTests.tsis for test setup configuration - Other Node.js built-in usages are in scripts outside the test environment
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for Node.js built-in module usage in test files
rg -t ts -t tsx "require\(['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" src/
Length of output: 135
Script:
#!/bin/bash
# Search for Node.js built-in module usage in test files using both import and require patterns
rg -t typescript -t javascript "(?:import|require)\(['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" "**/*.test.{ts,js}" "**/*.spec.{ts,js}"
# Also check for ES module style imports
rg -t typescript -t javascript "^import .* from ['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" "**/*.test.{ts,js}" "**/*.spec.{ts,js}"
# Check if any test files use other Node.js built-ins
rg -t typescript -t javascript "(?:import|require)\(['\"](?:child_process|cluster|dgram|dns|net|os|process|querystring|readline|repl|tls|tty|v8|vm|zlib)['\"]" "**/*.test.{ts,js}" "**/*.spec.{ts,js}"
# Check for ES module style imports of other Node.js built-ins
rg -t typescript -t javascript "^import .* from ['\"](?:child_process|cluster|dgram|dns|net|os|process|querystring|readline|repl|tls|tty|v8|vm|zlib)['\"]" "**/*.test.{ts,js}" "**/*.spec.{ts,js}"
Length of output: 879
Script:
#!/bin/bash
# Search for Node.js built-in module usage in test files without file type specification
rg "(?:import|require)\(['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" "src/**/*.test.ts" "src/**/*.spec.ts"
# Also check for ES module style imports
rg "^import .* from ['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" "src/**/*.test.ts" "src/**/*.spec.ts"
# Let's also check the source files that might be imported by tests
rg "(?:import|require)\(['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" "src/**/*.ts"
# And ES module style imports in source files
rg "^import .* from ['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]" "src/**/*.ts"
Length of output: 831
Script:
#!/bin/bash
# First, let's find where the test files are located
fd -e ts -e js ".*\.(test|spec)\.(ts|js)$"
# Find all TypeScript/JavaScript files to check Node.js built-in usage
fd -e ts -e js | xargs rg "(?:import|require)\(['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]"
# Check for ES module style imports in all TypeScript/JavaScript files
fd -e ts -e js | xargs rg "^import .* from ['\"](?:assert|buffer|crypto|fs|http|https|path|stream|url|util)['\"]"
Length of output: 1482
tsconfig.json (1)
21-22: LGTM! TypeScript configuration aligns with Vitest setup.
The exclude patterns are appropriate and match the coverage exclusions in vitest.config.ts.
src/setupTests.ts (1)
6-7: LGTM! Correct migration of fetch mock to Vitest.
The global fetch mock has been properly migrated from Jest to Vitest.
package.json (1)
71-73: LGTM! New Vitest scripts added correctly
The new Vitest scripts are well-structured and follow common conventions.
src/screens/UserPortal/People/People.test.tsx (2)
127-137: LGTM! Properly migrated matchMedia mock
The matchMedia mock has been correctly updated to use Vitest's mocking utilities.
Line range hint 140-157: LGTM! Test cases successfully migrated to Vitest
The test cases have been properly migrated from Jest to Vitest while maintaining the same functionality and assertions.
Also applies to: 158-179, 180-205, 206-231
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/setupTests.ts (2)
29-32: Remove commented-out Jest Preview configurationSince we're migrating to Vitest, we should either:
- Remove the commented Jest Preview configuration
- Replace it with the Vitest equivalent if preview functionality is needed
34-37: Update timeout configuration commentThe comment "Use the global setTimeout function" is outdated and doesn't match the actual implementation using Vitest's configuration.
-// Use the global setTimeout function +// Configure global test timeout beforeAll(() => { vi.setConfig({ testTimeout: 15000 }); });package.json (1)
Line range hint
89-92: Remove Jest-specific ESLint configurationSince we're migrating to Vitest, the Jest-specific ESLint configuration should be updated.
"eslintConfig": { "extends": [ - "react-app", - "react-app/jest" + "react-app" ] },
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
package.json(3 hunks)src/setupTests.ts(2 hunks)
🔇 Additional comments (4)
src/setupTests.ts (1)
6-8: LGTM: Proper Vitest setup and mocking
The migration from Jest to Vitest is correctly implemented for the imports and global fetch mock.
package.json (3)
71-73: LGTM: Vitest test scripts properly configured
The test scripts for Vitest are correctly set up with appropriate commands for running tests, watch mode, and coverage.
127-130: LGTM: Essential Vitest dependencies added
The necessary Vitest-related dependencies have been added with appropriate versions:
- @typescript-eslint updates for better TypeScript support
- @vitest/coverage-istanbul for coverage reporting
- @vitest/ui for the Vitest UI interface
Line range hint 141-144: Consider removing Jest dependencies
Since we're migrating to Vitest, consider removing Jest-related dependencies:
- jest
- jest-localstorage-mock
- jest-location-mock
- jest-preview
However, verify that all test files have been migrated before removing these dependencies.
|
Please fix the conflicting files |
|
I have made changes in vitest.config.ts to make sure that the tests run. When I revert to the original vitest.config.ts of the develop branch the tests don't run as expected and I get the error saying "No test files found, exiting with code 1" |
Closing |
What kind of change does this PR introduce?
Refactor
Issue Number:
Fixes #2576
Did you add tests for your changes?
Yes
Snapshots/Videos:
Summary
Migrating the tests of People.tsx Component from jest to vitest
Does this PR introduce a breaking change?
No
Other information
Have you read the contributing guide?
Yes
Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Documentation
Chores
Refactor