test: setup base for unit testing using vitest #531
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- **vite.config.ts**: Added Vitest configuration for testing, global enabled, jsdom environment, setup file, and coverage provider set to v8. - **tsconfig.json & tsconfig.app.json**: Included Vitest and Testing Library types for type-checking. - **package.json**: Added Vitest scripts (`test` and `test:coverage`), along with dependencies for Vitest, Testing Library, and related tooling. - **setupTest.ts**: Added setup file to extend `expect` with Testing Library matchers.
- Added `modal.test.tsx` with tests to validate Modal behavior: - Ensures component matches the snapshot. - Confirms the title is displayed when `open` is true. - Verifies the title is absent when `open` is false. - Created a snapshot file `modal.test.tsx.snap`. - Exported `ModalProps` in `modal.tsx` to enable type usage in tests.
- Removed direct import of '@testing-library/jest-dom'. - Updated to use matchers from '@testing-library/jest-dom/matchers'. - Ensures consistency in imports and aligns with testing setup best practices.
- Removed unused `MemoryRouter` from `modal.test.tsx`. - Updated snapshot-related test case to use `baseElement` for clarity. - Added new test cases: - Verify modal content rendering. - Verify `onClose` prop is called when modal is closed. - Revised and improved existing test case descriptions for readability. - Deleted stale snapshot file `modal.test.tsx.snap`.
- Replace "make test" with "npm run test" in `.github/workflows/ci.yml`. - Ensures consistency by aligning the test task with npm scripts. - Improves clarity and uniformity in the CI process.
- Updated `.github/workflows/ci.yml`: - Modified the "Test" step to include coverage by running `npm run test -- --coverage`.
- Created a new snapshot file `modal.test.tsx.snap` under `src/components/test/__snapshots__`. - Captures the rendered structure of the modal component to ensure consistent UI updates.
- Updated `.github/workflows/ci.yml`: - Added a step to cache Node.js dependencies using `actions/cache@v4`. - Configured cache key based on `package-lock.json` hash for efficient reuse. This change aims to speed up CI runs and reduce redundant package installations.
- Updated the test command in `.github/workflows/ci.yml` to include the `--silent` flag for cleaner output. - Commented out the "Generate report" step to disable its execution for now.
- Deleted the "Cache Node dependencies" step in `.github/workflows/ci.yml`. - Rationale: Simplifies the workflow as caching is not necessary for the current setup. ```
|
@geolffreym Review and evaluate. |
# Conflicts: # .github/workflows/ci.yml
- Updated `.github/workflows/ci.yml` to include the `--coverage` flag when running tests. - This ensures test coverage data is generated and can be uploaded to Codecov for better analysis.
- Updated `.github/workflows/ci.yml`: - Split the "Test" step into two separate steps: one for running tests (`npm run test`) and another for coverage generation (`npm run test:coverage`). - Ensures more granular execution and better step visibility in CI pipelines.
- Removed redundant "Coverage" step from `.github/workflows/ci.yml`. - Ensured `test:coverage` is run only once during the CI process. - Improved clarity and reduced duplication in the workflow configuration.
- Updated `.github/workflows/ci.yml`: - Replaced `codecov-action@v5` with `codecov-action@v4`. - Commented out unused `token` and `slug` parameters. This ensures compatibility and simplifies configuration.
- Updated `.github/workflows/ci.yml`: - Un-commented `token` and `slug` parameters in Codecov action to enable coverage report uploads.
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. Thanks for integrating Codecov - We've got you covered ☂️ |
|
geolffreym
approved these changes
Feb 7, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces testing capabilities and coverage reporting to the project, along with some minor refactoring and dependency updates. The most important changes include adding testing libraries and configurations, updating the
package.jsonwith new scripts and dependencies, and creating a test file for the modal component.Testing and Coverage:
package.json, includingvitest,@testing-library/react, and@testing-library/jest-dom. [1] [2] [3] [4] [5]vite.config.tsto include test configurations withvitestand coverage providerv8. [1] [2]setupTest.tsto extendexpectwith matchers from@testing-library/jest-dom.Script Updates:
package.jsonto add new scripts for running tests and generating coverage reports..github/workflows/ci.ymlto run tests with coverage during the CI process.Component Testing:
src/components/test/modal.test.tsxfor theModalcomponent, including multiple test cases.Minor Changes:
ModalPropsinterface insrc/components/modal.tsx.src/sections/user/profile-transfer.tsx.tsconfig.app.json.