Fix CI failures: Vite/Node 18 incompatibility, ReactDOMTestUtils.act filter, getUserMedia guard, defaultProps deprecation

[Copilot]

CI was failing with 6 test failures on Node 18 due to Vite 7.x requiring Node 20.19+, plus several React deprecation warnings leaking into test output.

Changes

• .github/workflows/ci.yml: Drop Node 18.x from the test matrix; add 22.x. Vite 7 hard-requires Node 20.19+ or 22.12+, making every build.test.js run on Node 18 fail at execSync('npm run build').

• jest.setup.js: Fix the ReactDOMTestUtils.act suppression filter. React's actual warning wraps the name in backticks (`ReactDOMTestUtils.act` is deprecated), so the original includes('ReactDOMTestUtils.act is deprecated') never matched.

• src/components/FaceRecognition.jsx: Guard getUserMedia call against navigator.mediaDevices being undefined (jsdom, non-secure contexts):

  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    throw new Error('Camera API not available in this environment');
  }

• src/components/Dashboard.jsx: Replace Dashboard.defaultProps on a memo component with a default function parameter (lastReport = null), removing the React 18 warning about defaultProps deprecation on memo components.

Original prompt

The job failure in your latest workflow execution points to specific issues in your repository. Here's how you can address them:

---

Observations

1. YAML File Loading Error:

   • The logs indicate a failure in loading the translation YAML file:

     Failed to load YAML file /config/i18n/en.yml: Network error
     

   • The i18n system fails due to missing or inaccessible translations.

2. Deprecated APIs in React:

   • The logs show warnings about deprecated ReactDOMTestUtils.act usage:

     Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`. Import `act` from `react` instead.
     

   • Update your test files to import act from react.

3. FaceRecognition Component Failure:

   • Test logs show failure in the getUserMedia API:

     TypeError: Cannot read properties of undefined (reading 'getUserMedia')
     

   • Ensure that the getUserMedia function in your FaceRecognition.jsx handles scenarios where it is undefined.

4. General Test Failures:

   • A total of 6 tests failed (72 total), indicating issues in specific areas of your codebase.

---

Suggested Fixes

1. Fixing YAML Loading

Ensure the required YAML file exists and is correctly referenced. If the file path is /config/i18n/en.yml, verify:

• The YAML file exists in the mentioned location.
• The application has permissions to access this file.

Additional handling for file access errors:

try {
  const content = await loadYaml(filePath);
  return yaml.load(content);
} catch (error) {
  console.error(`Failed to load YAML file at ${filePath}`, error.message);
  throw new Error(`YAML Load Error: ${filePath}`);
}

2. Update to React.act

In your test files, replace ReactDOMTestUtils.act with React.act:

import { act } from 'react';

act(() => {
  render(<Component />);
});

3. Fix getUserMedia Usage in FaceRecognition.jsx

Add a fallback for the getUserMedia call to handle undefined:

try {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  video.srcObject = stream;
} catch (error) {
  console.error('Camera access failed:', error.message);
  // Add a fallback UI or handle gracefully
}

4. Investigate Remaining Test Failures

• Test Coverage: Logs indicate lower coverage in files like testUtils.js.
• Focus on fixing failing tests and improve the assertions for better stability.

Additional Steps:

• Check for cached dependencies that might be causing inconsistencies.
• Check and update the file .github/workflows/ci.yml (Workflow File) to ensure configurations align with repository changes.

---

If you encounter further issues, let me know for more assistance!

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.