feat: Implement Jest and React Testing Library for component testing …

[Suvam-paul145]

feat: Add Testing Infrastructure and Contribution Guidelines

Related Tickets & Documents

Fixes: #[issue-number]

Description

This PR establishes a robust testing infrastructure and contribution workflow for the Keploy Blog Website. It lays the foundation for future contributors to write and run tests, ensuring code quality and reducing regressions.

Motivation

• The project previously had no testing framework or contribution guidelines.
• New contributors had no clear path for understanding how to contribute effectively.
• There was no automated way to verify that changes don't break existing functionality.

Changes

Documentation

File	Change
CONTRIBUTING.md	[NEW] Added comprehensive contribution guidelines covering code of conduct, how to contribute, style guide, and bug reporting.
README.md	[MODIFIED] Added "Running Tests" (Step 7) and "Contributing" sections.
.github/PULL_REQUEST_TEMPLATE.md	[MODIFIED] Enhanced "Testing" section with a checklist for running tests, adding new tests, and manual verification.

Testing Infrastructure

File	Change
jest.config.js	[NEW] Jest configuration for Next.js environment.
jest.setup.js	[NEW] Jest setup file to extend expect with @testing-library/jest-dom matchers.
.env.test	[NEW] Environment variables for Jest test runs.
utils/test-utils.tsx	[NEW] Custom render utility for Testing Library (allows future addition of providers).
__tests__/smoke.test.js	[NEW] Basic smoke test to verify the testing harness is operational.
__tests__/post-card.test.tsx	[NEW] Dynamic/parameterized tests for the PostCard component, covering: - Correct URL generation for Technology vs Community posts. - Fallback to "Anonymous" when author is missing. - Rendering of title and excerpt.

Configuration

File	Change
tsconfig.json	[MODIFIED] Added "types": ["jest", "node"] for proper TypeScript support in test files.
package.json	[MODIFIED] Added "test": "jest" script and dev dependencies: jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom, @testing-library/dom.

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• New feature (change that adds functionality)
• Documentation update (changes to README, guides, etc.)

Testing

• Ran npm test and all tests passed.
• Added new tests for the changes.
• Manually verified the changes in the browser (not applicable for infra changes).

Test Scenarios

> npm test

PASS  __tests__/smoke.test.js
  Smoke Test
    ✓ renders a heading

PASS  __tests__/post-card.test.tsx
  PostCard Component (Dynamic Tests)
    ✓ renders Technology Post with Author correctly
    ✓ renders Community Post without Author correctly

Test Suites: 2 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   0 total

Demo

N/A - This is a tooling/infrastructure PR. No UI changes.

Environment and Dependencies

• New Dependencies:
  • jest (^30.2.0)
  • jest-environment-jsdom (^30.2.0)
  • @testing-library/react (^16.3.1)
  • @testing-library/jest-dom (^6.9.1)
  • @testing-library/dom (^10.4.1)
  • @next/swc-win32-x64-msvc (platform-specific, installed to resolve SWC binary issue)
• Configuration Changes:
  • tsconfig.json updated to include Jest types.
  • .env.test file added (should be in .gitignore if it contains secrets, but currently only has the public WordPress API URL).

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices (N/A for infra)
• For UI changes, I've included visual evidence of my changes (N/A)

---

Note for Reviewers: This PR introduces the test.each pattern (parameterized testing) as a best practice for future test development. This allows running the same test logic against multiple data sets, improving coverage and reducing code duplication.

Signed-off-by: Suvam Paul suvampersonal555@gmail.com