Jest + React Testing Library

This project demonstrates unit testing and integration testing in React using Jest and React Testing Library, with support for TypeScript, custom hooks, MSW (Mock Service Worker) for mocking API calls, and code formatting/linting using ESLint and Prettier.

It also includes Git hooks integration using Husky and lint-staged for a clean commit workflow.

📦 Installation

# React Testing Library and Jest DOM
npm install --save-dev @testing-library/react @testing-library/jest-dom
# or
yarn add -D @testing-library/react @testing-library/jest-dom

# User events support
npm install --save-dev @testing-library/user-event
# or
yarn add -D @testing-library/user-event

# Jest types for TypeScript support
npm install --save-dev @types/jest

🧪 Running Tests

Basic test command

npm test
# or
npm run test

Watch Mode

Run tests interactively:

yarn test:watch
# or
npm run test:watch

Watch mode will re-run tests related to changed files. You can press:

• w to show more options
• a to run all tests
• p to run by file name pattern

🧠 Test Utilities

• test.only — run a specific test
• test.skip — skip a specific test
• describe.only — run only a specific test suite
• describe.skip — skip a test suite
• fit — alias for test.only
• xit — alias for test.skip

🧼 Linting & Formatting

# Install ESLint plugin for Jest
npm install --save-dev eslint-plugin-jest

# Install and configure Prettier
npm install --save-dev --save-exact prettier

# Install Prettier config to avoid conflicts with ESLint
npm install --save-dev eslint-config-prettier
# or
yarn add -D eslint-config-prettier

Run Lint and Format

npm run lint && npm run format
# or
yarn lint && yarn format

🎯 Code Coverage

"coverage": "jest --coverage"

Run coverage:

npm run coverage
npm test --coverage
npm run test -- --coverage --watchAll

Example: Coverage from specific source files

"coverage": "jest --coverage --watchAll --collectCoverageFrom='src/components/**/*.{ts,tsx}'"

"collectCoverageFrom": [
  "src/components/**/*.{ts,tsx}",
  "!**/*.{test,spec}.{ts,tsx}",
  "!**/__tests__/**"
]

🌐 Mocking HTTP Requests

MSW (Mock Service Worker)

Mock Service Worker is used to intercept and mock network requests in tests and development.

• Official site: https://mswjs.io

npm install --save-dev msw

Setup Notes:

• Handlers are defined in src/mocks/handlers.ts
• Requests are intercepted using msw/node in test environment

npm list msw

Additional Fetch Support for Tests

npm install --save-dev whatwg-fetch
# or
yarn add whatwg-fetch --dev

``md

🧪 Query Methods in React Testing Library

Method	Use Case
getBy...	Synchronous. Throws error if element not found
queryBy...	Synchronous. Returns null if not found
findBy...	Asynchronous. Returns a Promise

⌨️ Keyboard Interactions

• Use render with wrapper for custom context providers
• Use renderHook from @testing-library/react-hooks (or vitest equivalent) to test custom hooks

🧪 Jest Utilities

• act — to wrap updates that trigger re-renders or effects
• jest.fn() — to mock functions
• jest.spyOn() — to spy on real implementations

🐶 Husky (Git Hooks)

npx husky-init
npm install

By default, this sets up a pre-commit hook that runs:

npm test

Update Pre-commit hook

Instead of just running tests, you can also run lint and format:

# Replace the contents of .husky/pre-commit
npm run lint && npm run format
# or
yarn lint && yarn format

🚫 Pre-push Hook Example

Add pre-push hook that runs tests:

npx husky add .husky/pre-push "npm test -- --watchAll=false"

🎯 lint-staged

To run linters and formatters only on staged files, install and configure lint-staged:

npm install --save-dev lint-staged

Example package.json config:

"lint-staged": {
  "**/*.{js,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

🧪 Testing Playground

• Testing Playground is a helpful online tool to inspect DOM elements and generate selectors for React Testing Library. You can copy the query code it suggests directly into your tests.
• A great tool to inspect DOM and generate queries for RTL

⚙️ Project Setup (React + TypeScript + Vite)

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

📚 Table of Contents

• Installation
• Running Tests
• Test Utilities
• Linting & Formatting
• Code Coverage
• Mocking HTTP Requests
• Jest Utilities
• Husky (Git Hooks)
• Pre-push Hook
• Lint-Staged
• Testing Playground
• Project Setup (React + Vite)