Master major dependency version upgrades, compatibility analysis, staged upgrade strategies, and comprehensive testing approaches.
\nMAJOR.MINOR.PATCH (e.g., 2.3.1)\n\nMAJOR: Breaking changes\nMINOR: New features, backward compatible\nPATCH: Bug fixes, backward compatible\n\n^2.3.1 = >=2.3.1 <3.0.0 (minor updates)\n~2.3.1 = >=2.3.1 <2.4.0 (patch updates)\n2.3.1 = exact version\n# npm\nnpm outdated\nnpm audit\nnpm audit fix\n\n# yarn\nyarn outdated\nyarn audit\n\n# Check for major updates\nnpx npm-check-updates\nnpx npm-check-updates -u # Update package.json\n# See why a package is installed\nnpm ls package-name\nyarn why package-name\n\n# Find duplicate packages\nnpm dedupe\nyarn dedupe\n\n# Visualize dependencies\nnpx madge --image graph.png src/\n// compatibility-matrix.js\nconst compatibilityMatrix = {\n react: {\n \"16.x\": {\n \"react-dom\": \"^16.0.0\",\n \"react-router-dom\": \"^5.0.0\",\n \"@testing-library/react\": \"^11.0.0\",\n },\n \"17.x\": {\n \"react-dom\": \"^17.0.0\",\n \"react-router-dom\": \"^5.0.0 || ^6.0.0\",\n \"@testing-library/react\": \"^12.0.0\",\n },\n \"18.x\": {\n \"react-dom\": \"^18.0.0\",\n \"react-router-dom\": \"^6.0.0\",\n \"@testing-library/react\": \"^13.0.0\",\n },\n },\n};\n\nfunction checkCompatibility(packages) {\n // Validate package versions against matrix\n}\n# 1. Identify current versions\nnpm list --depth=0\n\n# 2. Check for breaking changes\n# Read CHANGELOG.md and MIGRATION.md\n\n# 3. Create upgrade plan\necho \"Upgrade order:\n1. TypeScript\n2. React\n3. React Router\n4. Testing libraries\n5. Build tools\" > UPGRADE_PLAN.md\n# Don't upgrade everything at once!\n\n# Step 1: Update TypeScript\nnpm install typescript@latest\n\n# Test\nnpm run test\nnpm run build\n\n# Step 2: Update React (one major version at a time)\nnpm install react@17 react-dom@17\n\n# Test again\nnpm run test\n\n# Step 3: Continue with other packages\nnpm install react-router-dom@6\n\n# And so on...\n// tests/compatibility.test.js\ndescribe(\"Dependency Compatibility\", () => {\n it(\"should have compatible React versions\", () => {\n const reactVersion = require(\"react/package.json\").version;\n const reactDomVersion = require(\"react-dom/package.json\").version;\n\n expect(reactVersion).toBe(reactDomVersion);\n });\n\n it(\"should not have peer dependency warnings\", () => {\n // Run npm ls and check for warnings\n });\n});\n# Check the changelog directly\ncurl https://raw.githubusercontent.com/facebook/react/master/CHANGELOG.md\n# Run jscodeshift with transform URL\nnpx jscodeshift -t <transform-url> <path>\n\n# Example: Rename unsafe lifecycle methods\nnpx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/\n\n# For TypeScript files\nnpx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/\n\n# Dry run to preview changes\nnpx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry src/\n// migration-script.js\nconst fs = require(\"fs\");\nconst glob = require(\"glob\");\n\nglob(\"src/**/*.tsx\", (err, files) => {\n files.forEach((file) => {\n let content = fs.readFileSync(file, \"utf8\");\n\n // Replace old API with new API\n content = content.replace(\n /componentWillMount/g,\n \"UNSAFE_componentWillMount\",\n );\n\n // Update imports\n content = content.replace(\n /import { Component } from 'react'/g,\n \"import React, { Component } from 'react'\",\n );\n\n fs.writeFileSync(file, content);\n });\n});\n// Ensure tests pass before and after upgrade\nnpm run test\n\n// Update test utilities if needed\nnpm install @testing-library/react@latest\n// tests/integration/app.test.js\ndescribe(\"App Integration\", () => {\n it(\"should render without crashing\", () => {\n render(<App />);\n });\n\n it(\"should handle navigation\", () => {\n const { getByText } = render(<App />);\n fireEvent.click(getByText(\"Navigate\"));\n expect(screen.getByText(\"New Page\")).toBeInTheDocument();\n });\n});\n// visual-regression.test.js\ndescribe(\"Visual Regression\", () => {\n it(\"should match snapshot\", () => {\n const { container } = render(<App />);\n expect(container.firstChild).toMatchSnapshot();\n });\n});\n// cypress/e2e/app.cy.js\ndescribe(\"E2E Tests\", () => {\n it(\"should complete user flow\", () => {\n cy.visit(\"/\");\n cy.get('[data-testid=\"login\"]').click();\n cy.get('input[name=\"email\"]').type(\"user@example.com\");\n cy.get('button[type=\"submit\"]').click();\n cy.url().should(\"include\", \"/dashboard\");\n });\n});\n// renovate.json\n{\n \"extends\": [\"config:base\"],\n \"packageRules\": [\n {\n \"matchUpdateTypes\": [\"minor\", \"patch\"],\n \"automerge\": true\n },\n {\n \"matchUpdateTypes\": [\"major\"],\n \"automerge\": false,\n \"labels\": [\"major-update\"]\n }\n ],\n \"schedule\": [\"before 3am on Monday\"],\n \"timezone\": \"America/New_York\"\n}\n# .github/dependabot.yml\nversion: 2\nupdates:\n - package-ecosystem: \"npm\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n open-pull-requests-limit: 5\n reviewers:\n - \"team-leads\"\n commit-message:\n prefix: \"chore\"\n include: \"scope\"\n// rollback.sh\n#!/bin/bash\n\n# Save current state\ngit stash\ngit checkout -b upgrade-branch\n\n# Attempt upgrade\nnpm install package@latest\n\n# Run tests\nif npm run test; then\n echo \"Upgrade successful\"\n git add package.json package-lock.json\n git commit -m \"chore: upgrade package\"\nelse\n echo \"Upgrade failed, rolling back\"\n git checkout main\n git branch -D upgrade-branch\n npm install # Restore from package-lock.json\nfi\n# npm\nnpm install --package-lock-only # Update lock file only\nnpm ci # Clean install from lock file\n\n# yarn\nyarn install --frozen-lockfile # CI mode\nyarn upgrade-interactive # Interactive upgrades\n# npm 7+: strict peer dependencies\nnpm install --legacy-peer-deps # Ignore peer deps\n\n# npm 8+: override peer dependencies\nnpm install --force\n# Update all workspace packages\nnpm install --workspaces\n\n# Update specific workspace\nnpm install package@latest --workspace=packages/app\n