Skip to content

feat: Add comprehensive testing suite with Jest, Supertest, and React… - #56

Open
vansh2604-star wants to merge 1 commit into
Parvaggarwal01:mainfrom
vansh2604-star:Add-Comprehensive-Testing-Suite-with-Jest,-Supertest,-and-React-Testing-Library--#55
Open

feat: Add comprehensive testing suite with Jest, Supertest, and React…#56
vansh2604-star wants to merge 1 commit into
Parvaggarwal01:mainfrom
vansh2604-star:Add-Comprehensive-Testing-Suite-with-Jest,-Supertest,-and-React-Testing-Library--#55

Conversation

@vansh2604-star

@vansh2604-star vansh2604-star commented Jul 16, 2026

Copy link
Copy Markdown

feat: Add Comprehensive Testing Suite with Jest, Supertest, and React Testing Library

What Changed

  • Backend:

    • Replaced native node --test test runner with Jest and Supertest.
    • Integrated mongodb-memory-server for database testing in-memory.
    • Mocked external dependencies like Redis (ioredis-mock), RabbitMQ (amqplib), and rate limiters (express-rate-limit).
    • Added new integration tests under tests/auth.api.test.js validating user registration, login, and validation errors.
    • Migrated validation and IP utility tests to Jest format and achieved 100% test coverage for IP utilities.
  • Frontend:

    • Configured Vitest + React Testing Library for React components testing.
    • Setup React Testing Library DOM matcher extensions in src/tests/setup.js.
    • Added component and snapshot tests for the SendBarterModal component under src/components/modals/__tests__/SendBarterModal.test.jsx.
  • CI/CD:

    • Updated .github/workflows/ci.yml to automatically execute both Vitest (frontend) and Jest (backend) test jobs on every PR.

Why

  • The project previously lacked automated tests, increasing the risk of regression bugs slipping into production. Introducing robust unit/integration testing environments ensures codebase stability and simplifies review cycles for contributors and maintainers.

How To Test

Backend

  1. Go to the backend directory:
    cd barterly-backend
    
    Install new dependencies and run tests:

bash

npm install
npm test

Frontend

  1. Go to the frontend directory:
    bash

cd barterly-frontend
Install new dependencies and run tests:
bash

npm install
npm test

Screenshots

Automated backend tests result:All 17 backend tests passed successfully(Optional: Replace with your screenshot if desired)

Automated frontend tests result:All 6 frontend tests passed successfully(Optional: Replace with your screenshot if desired)

Related Issue

Closes #55

Checklist

I have read CONTRIBUTING.md.
I kept this pull request focused on one issue.
I ran the relevant checks locally.
I added or updated tests where appropriate.
I added screenshots or screen recordings for UI changes.
I documented any known limitations or follow-up work.

Summary by CodeRabbit

  • Tests

    • Added automated frontend tests covering the barter request modal, including validation, skill selection, submission, success handling, and error states.
    • Expanded backend tests for authentication, input validation, IP handling, and API responses.
    • CI now runs frontend tests automatically.
  • Quality Improvements

    • Added isolated test environments to improve reliability and consistency across test runs.
    • Standardized test execution and reporting across frontend and backend projects.

@vercel

vercel Bot commented Jul 16, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the Parv Aggarwal's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jul 16, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The PR adds backend Jest/Supertest tests with in-memory MongoDB support, frontend Vitest/React Testing Library tests, coverage configuration, and frontend CI test execution. Existing backend tests migrate to Jest, while barter pagination validation is reformatted without behavioral changes.

Changes

Automated testing suite

Layer / File(s) Summary
Backend test runtime and coverage
barterly-backend/{babel.config.json,jest.config.js,package.json,tests/setup.js,.gitignore}
Configures Jest, Babel, mocked external services, in-memory MongoDB lifecycle management, coverage thresholds, and the backend test script.
Backend API and utility test coverage
barterly-backend/tests/*, barterly-backend/src/validations/barter.validation.js
Adds authentication endpoint tests, migrates validation and IP utility tests to Jest, expands IP handling coverage, and reformats pagination validation chains without changing behavior.
Frontend Vitest and modal coverage
barterly-frontend/package.json, barterly-frontend/vite.config.js, barterly-frontend/src/tests/setup.js, barterly-frontend/src/components/modals/__tests__/*
Configures Vitest with jsdom and jest-dom, and tests modal rendering, skill filtering, errors, submission, and snapshots.
Frontend CI test execution
.github/workflows/ci.yml
Runs npm test in the frontend CI job after the build step.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CI
  participant Vitest
  participant SendBarterModal
  participant skillService
  participant barterService
  CI->>Vitest: npm test
  Vitest->>SendBarterModal: render modal
  SendBarterModal->>skillService: getMySkills()
  skillService-->>SendBarterModal: return active skills
  SendBarterModal->>barterService: createBarterRequest(request data)
  barterService-->>SendBarterModal: return success
  SendBarterModal-->>Vitest: alert success and invoke onClose
Loading

Possibly related PRs

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning Backend and frontend test suites plus in-memory MongoDB and CI test execution are added, but CI linting and coverage upload required by #55 are not shown. Add CI steps to run linting and upload coverage artifacts or reports, and ensure the PR workflow exercises coverage in CI.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly states the main change: adding a comprehensive testing suite with Jest, Supertest, and React Testing Library.
Out of Scope Changes check ✅ Passed All file changes support automated testing, CI, or test setup; no unrelated feature work is evident.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
barterly-backend/jest.config.js (1)

12-17: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use a glob pattern for coverage collection.

Explicitly listing only four files in collectCoverageFrom restricts coverage reporting to just those files. This means the 20% global coverage threshold is easily met, but newly added or untested files in the codebase are ignored, which defeats the purpose of a global threshold.

Consider replacing the explicit list with a glob pattern (e.g., "src/**/*.js") to accurately measure coverage across the entire source directory. You can also exclude specific entry points or config files using negation (e.g., "!src/server.js") if needed.

♻️ Proposed refactor
   collectCoverageFrom: [
-    "src/utils/ip.utils.js",
-    "src/validations/auth.validation.js",
-    "src/controllers/auth.controller.js",
-    "src/services/auth.service.js"
+    "src/**/*.js"
   ],
🤖 Prompt for 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.

In `@barterly-backend/jest.config.js` around lines 12 - 17, Update the
collectCoverageFrom configuration in jest.config.js to use a glob covering all
JavaScript files under src rather than listing only selected files. Add negated
patterns only for known entry points or configuration files that should be
excluded, while preserving the global coverage threshold.
🤖 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 `@barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx`:
- Around line 49-55: The SendBarterModal tests must await the asynchronous
getMySkills update before completing assertions or capturing the snapshot. In
barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx lines
49-55, wait for the empty-state error message before the test ends; in lines
126-130, wait for the same message before taking the snapshot so both tests
observe the finalized UI and avoid act warnings.

---

Nitpick comments:
In `@barterly-backend/jest.config.js`:
- Around line 12-17: Update the collectCoverageFrom configuration in
jest.config.js to use a glob covering all JavaScript files under src rather than
listing only selected files. Add negated patterns only for known entry points or
configuration files that should be excluded, while preserving the global
coverage threshold.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9e1edf95-160b-4b82-817d-2d2cc4bbe478

📥 Commits

Reviewing files that changed from the base of the PR and between d2c111a and cd537bd.

⛔ Files ignored due to path filters (3)
  • barterly-backend/package-lock.json is excluded by !**/package-lock.json
  • barterly-frontend/package-lock.json is excluded by !**/package-lock.json
  • barterly-frontend/src/components/modals/__tests__/__snapshots__/SendBarterModal.test.jsx.snap is excluded by !**/*.snap
📒 Files selected for processing (14)
  • .github/workflows/ci.yml
  • barterly-backend/.gitignore
  • barterly-backend/babel.config.json
  • barterly-backend/jest.config.js
  • barterly-backend/package.json
  • barterly-backend/src/validations/barter.validation.js
  • barterly-backend/tests/auth.api.test.js
  • barterly-backend/tests/auth.validation.test.js
  • barterly-backend/tests/ip.utils.test.js
  • barterly-backend/tests/setup.js
  • barterly-frontend/package.json
  • barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx
  • barterly-frontend/src/tests/setup.js
  • barterly-frontend/vite.config.js

Comment on lines +49 to +55
test("renders modal with requested skill title when open", async () => {
skillService.getMySkills.mockResolvedValueOnce({ data: [] });
render(<SendBarterModal {...defaultProps} />);

expect(screen.getByText("Send Barter Request")).toBeInTheDocument();
expect(screen.getByText("React Programming")).toBeInTheDocument();
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Await state updates to prevent act(...) warnings and flaky snapshots.

These tests complete synchronously before the asynchronous getMySkills fetch resolves. This causes state updates to happen after the test finishes, triggering React's act(...) warnings. Additionally, the snapshot test captures the initial loading state rather than the finalized UI.

  • barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L49-L55: Await the empty state error message before the test ends.
  • barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L126-L130: Await the same error message before taking the snapshot.
🐛 Proposed fixes

For renders modal with requested skill title when open:

   test("renders modal with requested skill title when open", async () => {
     skillService.getMySkills.mockResolvedValueOnce({ data: [] });
     render(<SendBarterModal {...defaultProps} />);
 
     expect(screen.getByText("Send Barter Request")).toBeInTheDocument();
     expect(screen.getByText("React Programming")).toBeInTheDocument();
+
+    await screen.findByText(/You don't have any active skills/i);
   });

For matches snapshot when open:

   test("matches snapshot when open", async () => {
     skillService.getMySkills.mockResolvedValueOnce({ data: [] });
     const { asFragment } = render(<SendBarterModal {...defaultProps} />);
+
+    await screen.findByText(/You don't have any active skills/i);
+
     expect(asFragment()).toMatchSnapshot();
   });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
test("renders modal with requested skill title when open", async () => {
skillService.getMySkills.mockResolvedValueOnce({ data: [] });
render(<SendBarterModal {...defaultProps} />);
expect(screen.getByText("Send Barter Request")).toBeInTheDocument();
expect(screen.getByText("React Programming")).toBeInTheDocument();
});
test("renders modal with requested skill title when open", async () => {
skillService.getMySkills.mockResolvedValueOnce({ data: [] });
render(<SendBarterModal {...defaultProps} />);
expect(screen.getByText("Send Barter Request")).toBeInTheDocument();
expect(screen.getByText("React Programming")).toBeInTheDocument();
await screen.findByText(/You don't have any active skills/i);
});
test("matches snapshot when open", async () => {
skillService.getMySkills.mockResolvedValueOnce({ data: [] });
const { asFragment } = render(<SendBarterModal {...defaultProps} />);
await screen.findByText(/You don't have any active skills/i);
expect(asFragment()).toMatchSnapshot();
});
📍 Affects 1 file
  • barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L49-L55 (this comment)
  • barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx#L126-L130
🤖 Prompt for 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.

In `@barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx`
around lines 49 - 55, The SendBarterModal tests must await the asynchronous
getMySkills update before completing assertions or capturing the snapshot. In
barterly-frontend/src/components/modals/__tests__/SendBarterModal.test.jsx lines
49-55, wait for the empty-state error message before the test ends; in lines
126-130, wait for the same message before taking the snapshot so both tests
observe the finalized UI and avoid act warnings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Add Comprehensive Testing Suite with Jest, Supertest, and React Testing Library

1 participant