feat(frontend): add Vitest testing infrastructure with React Testing … by jmanhype · Pull Request #266 · automagik-dev/forge

jmanhype · 2025-11-27T17:52:13Z

…Library

Add vitest and testing dependencies (vitest, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, jsdom, msw)
Create vitest.config.ts with jsdom environment and path aliases
Add test setup file with global mocks (matchMedia, ResizeObserver, etc.)
Add test utilities with QueryClient and Router wrappers
Create example tests for useFilteredTasks, useTaskMutations, and useAttemptExecution hooks demonstrating testing patterns
Add npm scripts: test, test:run, test:coverage

This establishes the foundation for comprehensive frontend test coverage.

gemini-code-assist · 2025-11-27T17:52:31Z

Summary of Changes

Hello @jmanhype, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request establishes a robust and modern frontend testing infrastructure by integrating Vitest and React Testing Library. It provides the necessary tools, configurations, and foundational test patterns to enable comprehensive unit and integration testing for React components and hooks. This initiative significantly enhances the overall code quality and maintainability of the frontend application.

Highlights

Vitest and React Testing Library Integration: Introduced Vitest as the primary testing framework for the frontend, along with React Testing Library for component and hook testing.
Essential Testing Dependencies: Added key dependencies including @testing-library/jest-dom, @testing-library/user-event, jsdom, and msw to support comprehensive testing scenarios.
Vitest Configuration: Configured Vitest to use the JSDOM environment for browser-like testing and set up path aliases for easier module resolution.
Global Test Setup and Utilities: Created a global setup file with mocks for browser APIs like matchMedia, ResizeObserver, and IntersectionObserver, and provided test utilities for wrapping components with QueryClient and BrowserRouter.
Example Tests for Hooks: Included example tests for useFilteredTasks, useTaskMutations, and useAttemptExecution hooks, demonstrating established testing patterns.
New npm Test Scripts: Added new npm scripts ('test', 'test:run', 'test:coverage') to easily execute tests and generate coverage reports.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request does an excellent job of setting up a robust testing infrastructure using Vitest and React Testing Library. The new test files for the hooks are well-structured, comprehensive, and follow best practices for mocking dependencies and testing asynchronous logic. The test utilities and setup files provide a solid foundation for future tests. I have a couple of suggestions to further improve the long-term maintainability and reliability of the test suite.

gemini-code-assist · 2025-11-27T17:53:37Z

frontend/src/test/setup.ts

+}));
+
+// Mock fetch globally
+global.fetch = vi.fn();


A global mock of fetch that does nothing (vi.fn()) can be dangerous as it will silently swallow any unmocked network requests. This can lead to tests passing when they should be failing because they are making unexpected API calls. It's safer to make unhandled requests throw an error to immediately surface such issues.

Since msw is part of the new dependencies, it should be used for mocking API endpoints. This change will ensure any fetch call not handled by msw or another explicit mock will fail the test.

Suggested change

global.fetch = vi.fn();

global.fetch = vi.fn().mockImplementation(() => {

throw new Error('Unhandled fetch request. Please use msw or vi.mock to mock API calls.');

});

gemini-code-assist · 2025-11-27T17:53:38Z

frontend/vitest.config.ts

+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,


While using globals: true is convenient, it can lead to global namespace pollution and make it less obvious where test functions like describe and it originate. For better long-term maintainability and to avoid potential conflicts with other libraries (e.g., Cypress), consider setting this to false.

With globals: false, you would need to explicitly import what you need in each test file, which makes them more self-contained and easier to understand:

import { describe, it, expect, vi } from 'vitest';

Suggested change

globals: true,

globals: false,

…Library - Add vitest and testing dependencies (vitest, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, jsdom, msw) - Create vitest.config.ts with jsdom environment and path aliases - Add test setup file with global mocks (matchMedia, ResizeObserver, etc.) - Add test utilities with QueryClient and Router wrappers - Create example tests for useFilteredTasks, useTaskMutations, and useAttemptExecution hooks demonstrating testing patterns - Add npm scripts: test, test:run, test:coverage This establishes the foundation for comprehensive frontend test coverage. Co-authored-by: Automagik Genie 🧞 <genie@namastex.ai>

namastex888 · 2025-11-28T23:10:22Z

@codex review this pr

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2025-11-28T23:14:01Z

frontend/src/hooks/__tests__/useFilteredTasks.test.ts

+import { renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useFilteredTasks } from '../useFilteredTasks';


Import missing useFilteredTasks hook

Running the new Vitest suite will fail immediately because useFilteredTasks is imported from ../useFilteredTasks, but that hook is not present anywhere in frontend/src/hooks (rg only finds this test). Module resolution will throw Cannot find module '../useFilteredTasks', so npm test/vitest cannot start until the hook is implemented or the import is corrected.

Useful? React with 👍 / 👎.

jmanhype · 2025-11-29T02:40:52Z

@codex review this pr

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2025-11-29T02:43:21Z

frontend/src/hooks/__tests__/useFilteredTasks.test.ts

@@ -0,0 +1,103 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useFilteredTasks } from '../useFilteredTasks';


Point tests at an existing hook

The new useFilteredTasks test imports ../useFilteredTasks, but there is no such hook anywhere under src/hooks (only the test file exists). Running npm run test will fail immediately with a module-not-found error before any tests execute. Please either add the hook or update the import to target the correct module so the test suite can run.

Useful? React with 👍 / 👎.

gemini-code-assist bot reviewed Nov 27, 2025

View reviewed changes

jmanhype force-pushed the claude/setup-vitest-testing-01Ru23G7W1xpih7AFRLAyoN9 branch from f50696b to 7f0b273 Compare November 28, 2025 19:01

jmanhype mentioned this pull request Nov 28, 2025

Code Quality: Address minor gemini-code-assist suggestions (7 PRs) #286

Open

chatgpt-codex-connector bot reviewed Nov 28, 2025

View reviewed changes

chatgpt-codex-connector bot reviewed Nov 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(frontend): add Vitest testing infrastructure with React Testing …#266

feat(frontend): add Vitest testing infrastructure with React Testing …#266
jmanhype wants to merge 1 commit intoautomagik-dev:devfrom
jmanhype:claude/setup-vitest-testing-01Ru23G7W1xpih7AFRLAyoN9

jmanhype commented Nov 27, 2025

Uh oh!

gemini-code-assist bot commented Nov 27, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Nov 27, 2025

Uh oh!

gemini-code-assist bot Nov 27, 2025

Uh oh!

namastex888 commented Nov 28, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Nov 28, 2025

Uh oh!

jmanhype commented Nov 29, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Nov 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

-global.fetch = vi.fn();
+global.fetch = vi.fn().mockImplementation(() => {
+  throw new Error('Unhandled fetch request. Please use msw or vi.mock to mock API calls.');
+});

Conversation

jmanhype commented Nov 27, 2025

Uh oh!

gemini-code-assist bot commented Nov 27, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Nov 27, 2025

Choose a reason for hiding this comment

Uh oh!

namastex888 commented Nov 28, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Nov 28, 2025

Choose a reason for hiding this comment

Uh oh!

jmanhype commented Nov 29, 2025

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Nov 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments