> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bugster.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Framework Compatibility
> Detailed framework and routing support information for Bugster CLI
Bugster supports all major JavaScript frameworks and generates automated tests for your web applications. This page provides detailed information about supported frameworks and routing patterns.
**Framework Differences**: Next.js and React have enhanced routing analysis features for the `generate` and `update` commands. Angular, Svelte, Vue, and other frameworks use AI agent-assisted test generation with Cursor or Claude Code.
## Supported Frameworks
} color="#green">
Enhanced routing analysis support
Enhanced routing analysis support
AI agent-assisted test generation
## Framework Implementation Differences
**Enhanced Routing Analysis**
Next.js and React applications benefit from advanced routing analysis in the `generate` and `update` commands. Bugster automatically:
* Detects and analyzes your application's routing structure
* Generates tests for all discovered routes
* Updates test suites when routes change
* Handles dynamic routes and nested layouts
This routing-aware approach ensures comprehensive test coverage across your application.
**AI Agent-Assisted Test Generation**
For Angular, Svelte, Vue, and other JavaScript frameworks, the `generate` and `update` commands work through AI coding assistants like Cursor or Claude Code:
* Tests are created and updated with AI assistance using Agent rules
* Leverages your coding assistant's understanding of your application
* Flexible approach that works with any framework or routing pattern
This approach provides maximum flexibility and works across all JavaScript frameworks and configurations.
Learn how to set up Bugster with Cursor for AI-assisted test generation
## Next.js Support
Bugster provides enhanced routing analysis for Next.js applications across different routing patterns.
### Supported Routing Patterns
**Pages Router** (`/pages` directory - Next.js 12 and legacy versions)
```javascript pages/index.js theme={null}
// pages/index.js
export default function Home() {
return Welcome to the homepage
}
```
```javascript pages/about.js theme={null}
// pages/about.js
export default function About() {
return About page
}
```
```javascript pages/blog/[slug].js theme={null}
// pages/blog/[slug].js
export default function BlogPost({ params }) {
return Blog post: {params.slug}
}
```
Bugster automatically detects all pages in your `/pages` directory and generates tests for static and dynamic routes.
**App Router** (`/app` directory - Next.js 13+) with file-based routing
```javascript app/page.js theme={null}
// app/page.js
export default function HomePage() {
return Welcome to the homepage
}
```
```javascript app/about/page.js theme={null}
// app/about/page.js
export default function AboutPage() {
return About page
}
```
```javascript app/blog/[slug]/page.js theme={null}
// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
return Blog post: {params.slug}
}
```
Bugster understands the new App Router structure and generates tests for all route segments, including nested layouts and dynamic routes.
## React.js Support
Bugster provides enhanced routing analysis for React 18+ applications using React Router DOM.
### Supported Routing Patterns
**Code-based routing** - Routes defined programmatically in your code
```javascript Create React App - JavaScript theme={null}
// src/App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function App() {
return (
} />
} />
} />
} />
);
}
export default App;
```
```typescript Vite - TypeScript theme={null}
// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function App(): JSX.Element {
return (
} />
} />
} />
} />
);
}
export default App;
```
Bugster analyzes your route definitions and generates tests for all declared routes, including dynamic parameters.
**File-based routing** - React Router v7 with file-based route definitions
```typescript React Router v7 theme={null}
// app/routes.ts
import type { RouteConfig } from "@react-router/dev/routes";
export default [
{
path: "/",
file: "routes/home.tsx",
},
{
path: "/about",
file: "routes/about.tsx",
},
{
path: "/blog/:slug",
file: "routes/blog.$slug.tsx",
},
] satisfies RouteConfig;
```
```typescript Home Route theme={null}
// app/routes/home.tsx
export default function Home() {
return Welcome to the homepage
;
}
```
```typescript Dynamic Route theme={null}
// app/routes/blog.$slug.tsx
import { useParams } from "@react-router/react";
export default function BlogPost() {
const { slug } = useParams();
return Blog post: {slug}
;
}
```
Bugster supports React Router v7's file-based routing system and automatically discovers routes from your configuration.
### React Router Versions
**Fully Supported** - Standard routing patterns with `` and `` components.
```javascript theme={null}
import { BrowserRouter, Routes, Route } from 'react-router-dom';
```
**Fully Supported** - Both code-based and file-based routing patterns.
```typescript theme={null}
import type { RouteConfig } from "@react-router/dev/routes";
```
### React Router Limitations
For enhanced routing analysis, the following patterns are not supported:
* Custom routers or dynamic routing systems with routes scattered across multiple files
* Alternative routing libraries (TanStack Router, Wouter, Reach Router)
* Complex routing factories that generate routes programmatically at runtime
If your React application uses unsupported routing patterns, you can use AI agent-assisted test generation with Cursor or Claude Code instead, which works with any navigation structure.
## Other Frameworks
Angular, Svelte, Vue, and other JavaScript frameworks are supported with AI agent-assisted test generation:
**Fully Supported** - All Angular configurations work with Bugster's AI agent-assisted test generation.
* Angular 12+ applications
* Angular Router or any routing solution
* Angular CLI or custom build configurations
* Standalone components and NgModules
Use Cursor or Claude Code with Bugster Agent rules to generate and update tests for your Angular application.
**Fully Supported** - All Svelte configurations work with Bugster's AI agent-assisted test generation.
* Svelte applications
* Any routing solution
* Vite or custom build configurations
* SPA modes
Use Cursor or Claude Code with Bugster Agent rules to generate and update tests for your Svelte application.
**Fully Supported** - All Vue configurations work with Bugster's AI agent-assisted test generation.
* Vue 2 and Vue 3 applications
* Vue Router or any routing solution
* Vite, Vue CLI, or custom build configurations
* Options API and Composition API
Use Cursor or Claude Code with Bugster Agent rules to generate and update tests for your Vue application.
**Fully Supported** - Bugster works with any JavaScript framework through AI agent assistance.
Supported frameworks include but are not limited to:
* Nuxt
* SvelteKit
* Preact
* Remix
* Vanilla JavaScript applications
* And any other JavaScript framework or library
Use Cursor or Claude Code with Bugster Agent rules to generate and update tests for any framework.
## Getting Started with Your Framework
Check that your project uses one of the supported frameworks and routing patterns listed above.
Follow the [installation guide](/installation) to set up Bugster CLI on your system.
Run the quickstart command in your project directory:
```bash theme={null}
bugster quickstart --api-key=YOUR_API_KEY
```
Execute the generated tests:
```bash theme={null}
bugster run
```
## Need Help?
Follow our quickstart guide to set up Bugster with your framework
Get help from the community and Bugster team
## Command Behavior Summary
**Next.js & React**: Enhanced routing analysis automatically discovers and generates tests for all routes.
**Angular, Svelte, Vue & Others**: AI agent-assisted generation using Cursor or Claude Code with Bugster Agent rules.
**All Frameworks**: Test execution works identically across all frameworks. No differences in how tests run.